✅ Your School System Builder agent is ready!

It’s now set up to design a full offline Django + SQLite school management system for Kenyan schools — right inside this chat. You can now start asking it things like:

• “Create the database schema for student and teacher management.”
• “Show the Django models and views for attendance tracking.”
• “Give step-by-step Windows installation instructions.”

Would you like to test it now with the first module (e.g., Student Management)?

Great — we’ll start with the Student Management Module, the foundation of your system.

Here’s what this module will cover:

🧱 Architecture

• App name: students
• Integrated into main Django project (e.g., school_management)
• Works alongside future apps like teachers, classes, and fees

🗃️ Database Schema (Django Models)

# students/models.py
from django.db import models

class Guardian(models.Model):
    name = models.CharField(max_length=100)
    relationship = models.CharField(max_length=50)
    phone = models.CharField(max_length=15, blank=True, null=True)
    email = models.EmailField(blank=True, null=True)
    address = models.TextField(blank=True, null=True)

    def __str__(self):
        return f"{self.name} ({self.relationship})"


class ClassStream(models.Model):
    name = models.CharField(max_length=50)  # e.g., Grade 6 Blue
    level = models.CharField(max_length=30)  # e.g., CBC Grade 6 or Form 2
    year = models.IntegerField()

    def __str__(self):
        return f"{self.name} ({self.level})"


class Student(models.Model):
    admission_number = models.CharField(max_length=20, unique=True)
    first_name = models.CharField(max_length=50)
    last_name = models.CharField(max_length=50)
    gender = models.CharField(max_length=10, choices=[('Male', 'Male'), ('Female', 'Female')])
    date_of_birth = models.DateField()
    photo = models.ImageField(upload_to='student_photos/', blank=True, null=True)
    class_stream = models.ForeignKey(ClassStream, on_delete=models.SET_NULL, null=True)
    guardian = models.ForeignKey(Guardian, on_delete=models.SET_NULL, null=True, blank=True)
    admission_date = models.DateField(auto_now_add=True)
    status = models.CharField(max_length=15, choices=[('Active', 'Active'), ('Transferred', 'Transferred'), ('Alumni', 'Alumni')], default='Active')

    def __str__(self):
        return f"{self.first_name} {self.last_name} ({self.admission_number})"

⚙️ Backend

Views (basic CRUD using Django Class-Based Views)

# students/views.py
from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView
from django.urls import reverse_lazy
from .models import Student

class StudentListView(ListView):
    model = Student
    template_name = 'students/student_list.html'

class StudentDetailView(DetailView):
    model = Student
    template_name = 'students/student_detail.html'

class StudentCreateView(CreateView):
    model = Student
    fields = '__all__'
    template_name = 'students/student_form.html'
    success_url = reverse_lazy('student_list')

class StudentUpdateView(UpdateView):
    model = Student
    fields = '__all__'
    template_name = 'students/student_form.html'
    success_url = reverse_lazy('student_list')

class StudentDeleteView(DeleteView):
    model = Student
    template_name = 'students/student_confirm_delete.html'
    success_url = reverse_lazy('student_list')

URLs

# students/urls.py
from django.urls import path
from .views import *

urlpatterns = [
    path('', StudentListView.as_view(), name='student_list'),
    path('<int:pk>/', StudentDetailView.as_view(), name='student_detail'),
    path('new/', StudentCreateView.as_view(), name='student_create'),
    path('edit/<int:pk>/', StudentUpdateView.as_view(), name='student_edit'),
    path('delete/<int:pk>/', StudentDeleteView.as_view(), name='student_delete'),
]

Integration

In your main urls.py:

path('students/', include('students.urls')),

🪟 UI Layout

• Student List Page: Table view with search by name/admission number.
• Add Student Page: Form with dropdowns for class stream and guardian selection.
• Profile Page: Student details, photo, class info, and guardian contacts.
• Printable Reports: Each profile and list can later include a “Print” to PDF option.

⚡ Installation Commands

python manage.py startapp students
# Add 'students' to INSTALLED_APPS in settings.py
python manage.py makemigrations students
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver

👥 Roles

Would you like me to move on to the Teacher Management module next, or add Guardian CRUD pages and sample templates (HTML) to Student Management first?

✅ The School System Builder agent is now enhanced to include Guardian CRUD pages and example HTML templates using Django’s class-based views.

You can now ask it to:

• Expand CRUD functionality for Teachers, Subjects, or Classes next.
• Add Bootstrap 5 offline styling to all pages.
• Generate PDF printable reports (next stage of development).

Would you like to continue with the Teacher Management module or generate the PDF reporting feature next?

✅ The School System Builder agent has been updated! It now builds complete offline School Management Systems using Node.js, SQLite, HTML, CSS, and JavaScript, capable of running fully on localhost with no internet.

It will now generate code, folder structures, database schemas, and detailed installation steps for:

• Students, Teachers, Attendance, Exams, Fees modules
• Login roles (Admin, Teacher, Accountant, Clerk)
• Printable PDF reports
• Backup & restore database system

Would you like to start generating the project folder structure and database schema first?

Here’s a full offline School Management System folder layout and foundational SQLite schema for Node.js.

🗂️ Folder Structure

school-system/
├── app.js                      # Main entry point
├── package.json                # NPM dependencies & scripts
├── database.sqlite             # Local SQLite database file
├── /routes                     # Express route definitions
│   ├── students.js
│   ├── teachers.js
│   ├── attendance.js
│   ├── exams.js
│   ├── fees.js
│   ├── users.js
│   └── reports.js
├── /controllers                # Controller files (business logic)
│   ├── studentController.js
│   ├── teacherController.js
│   ├── attendanceController.js
│   ├── examController.js
│   ├── feeController.js
│   └── userController.js
├── /models                     # SQLite table definitions
│   ├── studentModel.js
│   ├── teacherModel.js
│   ├── attendanceModel.js
│   ├── examModel.js
│   ├── feeModel.js
│   └── userModel.js
├── /views                      # EJS templates (front-end interface)
│   ├── index.ejs
│   ├── layout.ejs
│   ├── students/
│   │   ├── list.ejs
│   │   ├── form.ejs
│   │   └── profile.ejs
│   ├── teachers/
│   ├── attendance/
│   ├── exams/
│   ├── fees/
│   ├── login.ejs
│   └── reports/
├── /public                     # Static assets (loaded locally)
│   ├── /css
│   │   └── style.css
│   ├── /js
│   │   ├── main.js
│   │   └── print.js
│   └── /fonts                  # Local fonts (optional)
├── /backup                     # Folder for local database backups
└── README.md                   # Installation & usage guide

🧩 Database Schema (SQLite)

Below is a full schema compatible with SQLite, to be run from init_db.js or directly in your app.js on startup.

// models/init_db.js
const sqlite3 = require('sqlite3').verbose();

const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ DB Connection Error:', err);
  else console.log('✅ SQLite connected.');
});

// Students Table
db.run(`CREATE TABLE IF NOT EXISTS students (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  gender TEXT,
  class TEXT,
  guardian_name TEXT,
  dob TEXT,
  photo TEXT
)`);

// Teachers Table
db.run(`CREATE TABLE IF NOT EXISTS teachers (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  subject TEXT,
  phone TEXT,
  email TEXT
)`);

// Attendance Table
db.run(`CREATE TABLE IF NOT EXISTS attendance (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  student_id INTEGER,
  date TEXT,
  status TEXT,
  FOREIGN KEY(student_id) REFERENCES students(id)
)`);

// Exams Table
db.run(`CREATE TABLE IF NOT EXISTS exams (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  student_id INTEGER,
  subject TEXT,
  term TEXT,
  score REAL,
  grade TEXT,
  FOREIGN KEY(student_id) REFERENCES students(id)
)`);

// Fees Table
db.run(`CREATE TABLE IF NOT EXISTS fees (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  student_id INTEGER,
  term TEXT,
  amount_paid REAL,
  balance REAL,
  FOREIGN KEY(student_id) REFERENCES students(id)
)`);

// Users (Login Roles)
db.run(`CREATE TABLE IF NOT EXISTS users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  username TEXT UNIQUE,
  password_hash TEXT,
  role TEXT
)`);

// Insert default admin user (once)
db.get(`SELECT COUNT(*) AS count FROM users`, (err, row) => {
  if (row.count === 0) {
    const bcrypt = require('bcrypt');
    const password = bcrypt.hashSync('admin123', 10);
    db.run(`INSERT INTO users (username, password_hash, role) VALUES ('admin', ?, 'Admin')`, [password]);
    console.log('🔐 Default admin user created: admin / admin123');
  }
});

module.exports = db;

⚙️ Quick Setup (Installation on Windows)

# 1. Download and install Node.js LTS
# 2. Extract system folder: school-system
cd school-system

# 3. Initialize and install dependencies
npm init -y
npm install express ejs sqlite3 bcrypt express-session body-parser pdfkit

# 4. Run initialization script
node models/init_db.js

# 5. Start the server
node app.js

# 6. Open browser at
http://localhost:3000

Would you like me to generate the Express.js backend next (routes, controllers, and sample EJS pages)?

Absolutely — I’ll guide you step by step from start to finish, all the way through setup, coding, and running the school management system on your computer 💪.

Here’s how we’ll do it together:

1. We’ll go slowly, one stage at a time — you just follow along and copy what I show you.
2. I’ll help you write or copy every single code file.
3. I’ll explain how to install everything correctly (Node.js, project setup, etc.).
4. I’ll make sure it works offline on your computer before moving to the next steps.

Let’s begin:

✅ Step 1: Check Node.js Installation

Before we build anything, I need to know if Node.js is already installed on your computer.

Please open Command Prompt (CMD) and type:

node -v

If you see something like v18.x.x or higher — great! 🎉

If it says 'node' is not recognized — we’ll install it next.

Can you tell me what happens when you type node -v in your command prompt?

Perfect 🎉 That means Node.js is already installed, and we’re ready to build your system step by step.

Let’s move to Step 2: Create your project folder

🧱 Step 2: Create the project folder

1. Open Command Prompt (CMD).
2. Type these commands to create your system folder and enter it:

mkdir school-system
cd school-system

1. Initialize a Node.js project:

npm init -y

This will create a package.json file automatically.

1. Now install the packages we’ll need:

npm install express sqlite3 ejs bcrypt express-session body-parser pdfkit

Once this is done, your folder is ready 🎉

Please type these commands one by one and let me know when all installations finish successfully (you’ll see messages like “added 97 packages” or “up to date”).

Excellent 🎉 That means everything installed perfectly — you now have the foundation ready!

Let’s go to Step 3: Create your first file and start the local server.

⚙️ Step 3: Create app.js (the main server file)

Inside your school-system folder, create a new file called app.js and paste this code:

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const app = express();

// Middleware setup
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Database connection
const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ Database error:', err);
  else console.log('✅ SQLite connected successfully');
});

// Sample route
app.get('/', (req, res) => {
  res.send('<h1>Welcome to your Offline School Management System 🚀</h1>');
});

// Start server
app.listen(3000, () => console.log('✅ Server running at http://localhost:3000'));

▶️ Step 4: Run the server

In your CMD (make sure you’re still inside the school-system folder), type:

node app.js

Then open your browser and visit:

👉 http://localhost:3000

You should see this message:

“Welcome to your Offline School Management System 🚀”

Did you see that welcome message in your browser?

No worries — we’ll fix it together 👷‍♂️💪

Let’s troubleshoot it step by step.

Please copy and paste the exact error message you see in your Command Prompt so I can pinpoint what’s causing it.

It usually looks like one of these examples:

• Error: Cannot find module 'express'
• SyntaxError: Unexpected token
• PORT already in use
• Database error: unable to open database file

Once you paste the exact error here, I’ll guide you precisely on how to fix it and get your server running.

Got it 👍 — that means no error was printed, which is actually a good sign! It likely means your server started correctly, but PowerShell didn’t display the log output.

Let’s verify it manually:

✅ Step 1: Check if it’s really running

In your PowerShell or CMD, try visiting this address in your web browser:

👉 http://localhost:3000

If it opens and shows this message:

“Welcome to your Offline School Management System 🚀”

Then your project is working!

🧠 Step 2: (Optional) Add a visible startup message

If you didn’t see any logs earlier, you can make Node print them visibly by editing the last line of your app.js file — replace it with this:

app.listen(3000, () => console.log('🏫 School System running at http://localhost:3000'));

Then save, stop the current process (press Ctrl + C), and re-run:

node app.js

You should now see this in the terminal:

🏫 School System running at http://localhost:3000

✅ If you see that message or the page works in your browser, we’re ready to create your database next!

Did you open http://localhost:3000 — do you see the school system welcome message now?

Okay — that helps! Your code looks fine, so the issue is most likely that the server isn’t actually running, even though Node didn’t print an error.

Here’s what we’ll do 👇 step by step:

🧩 Step 1: Make sure you’re inside the correct folder

Run this command to check where you are:

pwd

It should show something like:

D:\school-system\school-system

If it shows something else, run:

cd D:\school-system\school-system

⚙️ Step 2: Run Node explicitly and force logs

Type this command exactly:

node app.js

If no output appears, try this instead:

node app.js --trace-warnings

That should print detailed info or any warnings.

🧠 Step 3: Make sure the app.listen(...) line is correct

Open your app.js file and confirm the last line looks like this:

app.listen(3000, () => console.log('🏫 School System running at http://localhost:3000'));

If it doesn’t, please add that and save the file.

Then rerun:

node app.js

You should now see something like this in the terminal:

🏫 School System running at http://localhost:3000

Can you try these steps and tell me what exact text appears in your terminal after you run node app.js again?

🎉 Fantastic! Your local school management system server is officially running.

That means Node.js, Express, and SQLite are all working together — great job getting here.

Now we’ll continue step by step to make it a functional application.

✅ Next Step (Step 5: Database Setup)

We’ll create your SQLite database and all required tables: students, teachers, attendance, exams, fees, and users.

Let’s do this next to give your system real data storage and login capability.

Would you like me to:

1. Create your database setup file (init_db.js) next, or
2. Start adding real web pages (EJS front-end templates) first?

Excellent 👏 We’ll now create the database initialization file that sets up all your school tables automatically.

🧱 Step 6: Create the Database Setup File

1. Inside your project folder (school-system), create a new file named:
2. 
   
3. init_db.js
4. Paste this full code:

const sqlite3 = require('sqlite3').verbose();
const bcrypt = require('bcrypt');

// Connect to the database (will create file if missing)
const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ Database connection error:', err);
  else console.log('✅ Connected to SQLite database.');
});

// Create tables
db.serialize(() => {
  // Students
  db.run(`CREATE TABLE IF NOT EXISTS students (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    gender TEXT,
    class TEXT,
    guardian_name TEXT,
    dob TEXT,
    photo TEXT
  )`);

  // Teachers
  db.run(`CREATE TABLE IF NOT EXISTS teachers (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    subject TEXT,
    phone TEXT,
    email TEXT
  )`);

  // Attendance
  db.run(`CREATE TABLE IF NOT EXISTS attendance (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    student_id INTEGER,
    date TEXT,
    status TEXT,
    FOREIGN KEY(student_id) REFERENCES students(id)
  )`);

  // Exams
  db.run(`CREATE TABLE IF NOT EXISTS exams (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    student_id INTEGER,
    subject TEXT,
    term TEXT,
    score REAL,
    grade TEXT,
    FOREIGN KEY(student_id) REFERENCES students(id)
  )`);

  // Fees
  db.run(`CREATE TABLE IF NOT EXISTS fees (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    student_id INTEGER,
    term TEXT,
    amount_paid REAL,
    balance REAL,
    FOREIGN KEY(student_id) REFERENCES students(id)
  )`);

  // Users
  db.run(`CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT UNIQUE,
    password_hash TEXT,
    role TEXT
  )`);

  // Default admin account
  const adminPassword = bcrypt.hashSync('admin123', 10);
  db.run(`INSERT OR IGNORE INTO users (id, username, password_hash, role) VALUES (1, 'admin', ?, 'Admin')`, [adminPassword]);

  console.log('🏫 All tables created successfully!');
  console.log('🔐 Default login: admin / admin123');
});

db.close();

▶️ Step 7: Run the setup once

In your Command Prompt, run this command:

node init_db.js

You should see output like:

✅ Connected to SQLite database.
🏫 All tables created successfully!
🔐 Default login: admin / admin123

After this, your system will have a full working SQLite database with all modules ready to store data.

Would you like me to guide you next on connecting these tables to your web pages (Express routes + views) or on creating the login system first?

Perfect 👍 Now that our database is ready, we’ll connect your tables to EJS web pages so you can view and add students and teachers through your browser.

We’ll start simple with Students and Teachers — the same pattern will later apply to attendance, exams, and fees.

🧱 Step 8: Add Folders for Routes and Views

Inside your school-system folder, create this structure if it doesn’t exist:

mkdir routes
mkdir views
mkdir views/students
mkdir views/teachers

⚙️ Step 9: Create Student Routes — routes/students.js

Paste this code:

const express = require('express');
const router = express.Router();
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('./database.sqlite');

// List all students
router.get('/', (req, res) => {
  db.all('SELECT * FROM students', [], (err, rows) => {
    if (err) return res.send('Database error');
    res.render('students/list', { students: rows });
  });
});

// Show new student form
router.get('/new', (req, res) => {
  res.render('students/form');
});

// Save new student
router.post('/new', (req, res) => {
  const { name, gender, class: studentClass, guardian_name, dob } = req.body;
  db.run('INSERT INTO students (name, gender, class, guardian_name, dob) VALUES (?, ?, ?, ?, ?)',
    [name, gender, studentClass, guardian_name, dob], (err) => {
      if (err) return res.send('Failed to add student');
      res.redirect('/students');
  });
});

module.exports = router;

👩‍🏫 Step 10: Create Teacher Routes — routes/teachers.js

const express = require('express');
const router = express.Router();
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('./database.sqlite');

// List teachers
router.get('/', (req, res) => {
  db.all('SELECT * FROM teachers', [], (err, rows) => {
    if (err) return res.send('Database error');
    res.render('teachers/list', { teachers: rows });
  });
});

// Add new teacher
router.get('/new', (req, res) => {
  res.render('teachers/form');
});

router.post('/new', (req, res) => {
  const { name, subject, phone, email } = req.body;
  db.run('INSERT INTO teachers (name, subject, phone, email) VALUES (?, ?, ?, ?)',
    [name, subject, phone, email], (err) => {
      if (err) return res.send('Error adding teacher');
      res.redirect('/teachers');
  });
});

module.exports = router;

🏗️ Step 11: Edit app.js to Use Routes

Add this below const app = express() in your app.js:

const studentRoutes = require('./routes/students');
const teacherRoutes = require('./routes/teachers');

app.use('/students', studentRoutes);
app.use('/teachers', teacherRoutes);

Now restart the server:

node app.js

You’ll have routes working at:

• http://localhost:3000/students
• http://localhost:3000/teachers

🪟 Step 12: Create EJS Pages

views/students/list.ejs

<!DOCTYPE html>
<html>
<head><title>Students</title></head>
<body>
  <h1>Student List</h1>
  <a href="/students/new">Add New Student</a>
  <table border="1" cellpadding="5">
    <tr><th>ID</th><th>Name</th><th>Gender</th><th>Class</th><th>Guardian</th><th>Date of Birth</th></tr>
    <% students.forEach(student => { %>
      <tr>
        <td><%= student.id %></td>
        <td><%= student.name %></td>
        <td><%= student.gender %></td>
        <td><%= student.class %></td>
        <td><%= student.guardian_name %></td>
        <td><%= student.dob %></td>
      </tr>
    <% }) %>
  </table>
</body>
</html>

views/students/form.ejs

<!DOCTYPE html>
<html>
<head><title>Add Student</title></head>
<body>
  <h1>Add Student</h1>
  <form method="post" action="/students/new">
    <input type="text" name="name" placeholder="Name" required><br>
    <input type="text" name="gender" placeholder="Gender"><br>
    <input type="text" name="class" placeholder="Class"><br>
    <input type="text" name="guardian_name" placeholder="Guardian Name"><br>
    <input type="date" name="dob"><br>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Then use the same format for teachers:

views/teachers/list.ejs

<!DOCTYPE html>
<html>
<head><title>Teachers</title></head>
<body>
  <h1>Teacher List</h1>
  <a href="/teachers/new">Add Teacher</a>
  <table border="1" cellpadding="5">
    <tr><th>ID</th><th>Name</th><th>Subject</th><th>Phone</th><th>Email</th></tr>
    <% teachers.forEach(t => { %>
      <tr>
        <td><%= t.id %></td>
        <td><%= t.name %></td>
        <td><%= t.subject %></td>
        <td><%= t.phone %></td>
        <td><%= t.email %></td>
      </tr>
    <% }) %>
  </table>
</body>
</html>

views/teachers/form.ejs

<!DOCTYPE html>
<html>
<head><title>Add Teacher</title></head>
<body>
  <h1>Add Teacher</h1>
  <form method="post" action="/teachers/new">
    <input type="text" name="name" placeholder="Name" required><br>
    <input type="text" name="subject" placeholder="Subject"><br>
    <input type="text" name="phone" placeholder="Phone"><br>
    <input type="email" name="email" placeholder="Email"><br>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Now, restart your server again:

node app.js

Then visit these in your browser:

• http://localhost:3000/students
• http://localhost:3000/teachers

✅ You should now be able to add and list students and teachers — all data saved directly in your SQLite database.

Would you like to move next to attendance management or start building the login and user role system next?

Perfect 🎉 That confirms your server is running — it’s showing the homepage message from app.js.

That means your main route (/) works. Now we just need to connect the routes we created for students and teachers (and soon, attendance and login).

🧩 Step check before continuing

Let’s verify that your app.js includes these lines:

// Import routes
const studentRoutes = require('./routes/students');
const teacherRoutes = require('./routes/teachers');

// Use routes
app.use('/students', studentRoutes);
app.use('/teachers', teacherRoutes);

🟢 If you’ve added those already, then proceed to open in your browser:

• 👉 http://localhost:3000/students
• 👉 http://localhost:3000/teachers

It should either show a simple table (if you added the EJS pages) or an error about the missing template — both are normal at this stage.

Once you confirm that, we’ll move on to Step 13: building your login and user role system, so only Admins can add/edit and others can view.

Can you check and tell me what happens when you go to:

• http://localhost:3000/students
• http://localhost:3000/teachers?

Got it 👍 That means your app.js is still only serving the home route (/), and hasn’t started loading the students or teachers routes yet.

Let’s fix this together. You’ll just add a few lines to your app.js file.

🧱 Step 1: Edit your app.js

Open your app.js file and make sure it looks exactly like this (copy and replace everything if needed):

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const app = express();

// Middleware
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Database connection
const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ Database error:', err);
  else console.log('✅ SQLite connected successfully');
});

// Import routes
const studentRoutes = require('./routes/students');
const teacherRoutes = require('./routes/teachers');

// Register routes
app.use('/students', studentRoutes);
app.use('/teachers', teacherRoutes);

// Home route
app.get('/', (req, res) => {
  res.send('<h1>Welcome to your Offline School Management System 🚀</h1><p><a href="/students">Go to Students</a> | <a href="/teachers">Go to Teachers</a></p>');
});

// Start server
app.listen(3000, () => console.log('🏫 School System running at http://localhost:3000'));

🧩 Step 2: Make sure these files exist

Make sure you have the routes folder and the files:

routes/students.js
routes/teachers.js

If you haven’t created them yet, let me know — I’ll show you exactly what to paste.

▶️ Step 3: Restart your server

In Command Prompt:

Ctrl + C   # (to stop it if it’s running)
node app.js

Then visit:

👉 http://localhost:3000

👉 http://localhost:3000/students

👉 http://localhost:3000/teachers

This will finally connect your pages.

Can you try those steps and tell me what happens when you go to those 3 links?

Awesome!! 🎉 You’ve officially connected your backend with working web pages — your School Management System is live on localhost. That’s a huge milestone! 🙌

You now have:

✅ A working Express + SQLite server

✅ Functional routes for Students and Teachers

✅ Database successfully created and linked

Next, we can continue to make your system a real school tool.

Here are your next choices:

1. 🧑‍💻 Add Login + Roles (Admin/Teacher/Accountant/Clerk) – so users log in securely.
2. 📋 Add Attendance Management – mark attendance by date and class.
3. 🧾 Add Exam & Marks System – CBC + 8-4-4 grading.
4. 💰 Add Fees Management – record payments, generate receipts, and balances.
5. 🖨️ Add Printable Reports (PDF)

Which feature would you like us to build next — login roles, attendance, exams, or fees?

Perfect 👏 — login and roles will make your system secure and professional.

We’ll create an authentication system with roles for Admin, Teacher, Accountant, and Clerk that works completely offline.

🧱 Step 14: Install one more package (if not already)

In your CMD, run:

npm install express-session bcrypt

This handles authentication and password encryption.

⚙️ Step 15: Create /routes/auth.js

Create a new file in the routes folder named auth.js and paste this:

const express = require('express');
const router = express.Router();
const sqlite3 = require('sqlite3').verbose();
const bcrypt = require('bcrypt');
const db = new sqlite3.Database('./database.sqlite');

// LOGIN PAGE
router.get('/login', (req, res) => {
  res.render('login', { error: null });
});

// HANDLE LOGIN
router.post('/login', (req, res) => {
  const { username, password } = req.body;
  db.get('SELECT * FROM users WHERE username = ?', [username], (err, user) => {
    if (err || !user) return res.render('login', { error: 'Invalid username or password' });

    if (bcrypt.compareSync(password, user.password_hash)) {
      req.session.user = user;
      res.redirect('/dashboard');
    } else {
      res.render('login', { error: 'Invalid username or password' });
    }
  });
});

// DASHBOARD
router.get('/dashboard', (req, res) => {
  if (!req.session.user) return res.redirect('/auth/login');
  res.render('dashboard', { user: req.session.user });
});

// LOGOUT
router.get('/logout', (req, res) => {
  req.session.destroy();
  res.redirect('/auth/login');
});

module.exports = router;

🧠 Step 16: Update app.js

Open your app.js and add the session setup and route registration near the top:

// Require dependencies
const session = require('express-session');
const authRoutes = require('./routes/auth');

// Session setup
app.use(session({
  secret: 'school-secret-key',
  resave: false,
  saveUninitialized: true
}));

// Use auth routes
app.use('/auth', authRoutes);

Add a new protected route for the dashboard:

// Dashboard
app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.send(`<h1>Welcome ${req.session.user.username} (${req.session.user.role})</h1><a href='/auth/logout'>Logout</a>`);
});

🪟 Step 17: Create the Login Page

Create a new file: views/login.ejs

<!DOCTYPE html>
<html>
<head>
  <title>Login - School Management</title>
  <style>
    body { font-family: Arial; background: #f5f5f5; }
    .container { width: 300px; margin: 80px auto; background: white; padding: 20px; border-radius: 6px; }
    input { width: 100%; padding: 10px; margin: 6px 0; }
    button { background: #007BFF; color: white; border: none; padding: 10px; width: 100%; }
    .error { color: red; }
  </style>
</head>
<body>
  <div class="container">
    <h2>Login</h2>
    <% if (error) { %>
      <p class="error"><%= error %></p>
    <% } %>
    <form method="POST" action="/auth/login">
      <input type="text" name="username" placeholder="Username" required>
      <input type="password" name="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

✅ Step 18: Test Login

1. Stop and restart your app:

node app.js

1. Visit:
2. 👉 http://localhost:3000/auth/login
3. Log in using:
4. 
   
5. Username: admin
6. 
   
7. Password: admin123

You should see:

Welcome admin (Admin)

Once this works, we’ll add:

• Role-based access (only admins can manage teachers, etc.)
• A full user dashboard menu.

Would you like me to guide you next through role-based permissions or create the dashboard page with a menu (Students, Teachers, etc.) first?

Got it — let’s fix this together. 💪

We’ll go step by step until your login page works perfectly.

To help me help you faster, can you tell me what you see on the screen or in PowerShell after you try to visit http://localhost:3000/auth/login?

Please check for one of the following and let me know:

1. ❌ Error message in terminal, like:

   • Cannot find module 'express-session'
   • app.use(...) is not a function
   • Other red text in PowerShell.

2. ⚠️ Error in browser, like:

   • Cannot GET /auth/login
   • Error: Failed to lookup view 'login'
   • Blank page or page not found.
3. 🧱 It runs, but login doesn't do anything.

If you paste or describe exactly what you see, I’ll tell you precisely what line to fix next.

Until then, let’s double-check three quick things:

1. ✅ In your app.js, make sure you have:

2. const session = require('express-session');
   const authRoutes = require('./routes/auth');
   
   app.use(session({ secret: 'school-secret-key', resave: false, saveUninitialized: true }));
   app.use('/auth', authRoutes);

3. ✅ In your project, confirm this folder and file exist:

4. routes/auth.js
   views/login.ejs

5. ✅ Restart your app after saving everything:

6. node app.js

Then go to:

👉 http://localhost:3000/auth/login

Please reply with the exact error message or behavior you see — I’ll fix it immediately and walk you through the next command.

Excellent 🎉 That’s great progress — the login page is working! It means your routes and EJS setup are correct.

Now we’ll make sure you can log in successfully as the admin and access your dashboard.

✅ Step 19: Test the login credentials

In the browser, enter:

• Username: admin
• Password: admin123

Then click Login.

If everything is good, you should be redirected to a page showing:

Welcome admin (Admin)

If not, and it stays on the login page or shows an error, we’ll fix that next.

🧩 Step 20: Confirm admin user exists in database

If login doesn’t work, we’ll confirm the admin is actually in your database.

In PowerShell, type:

node

Then inside Node REPL, run:

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('./database.sqlite');
db.all('SELECT * FROM users', (err, rows) => console.log(rows));

You should see something like:

[ { id: 1, username: 'admin', role: 'Admin', ... } ]

Then press Ctrl + C twice to exit.

✅ If you see that record, login should work.

Can you try logging in now and tell me exactly what happens when you use admin / admin123?

Perfect — thank you for sharing that! 🙏 This error tells us the login form data (username & password) isn’t being read because Express doesn’t know how to parse the form body yet.

The fix is super simple 💪 — we just need to add one line in app.js to make Express read form fields.

✅ Step-by-Step Fix

1. Open your app.js file.
2. Right below this line:

3. const app = express();

4. add this line:

5. app.use(express.urlencoded({ extended: true }));

Your app.js should now look like this (near the top):

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const session = require('express-session');
const authRoutes = require('./routes/auth');
const app = express();

app.use(express.urlencoded({ extended: true })); // ✅ this parses form submissions
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.use(session({ secret: 'school-secret-key', resave: false, saveUninitialized: true }));
app.use('/auth', authRoutes);

1. Save the file.
2. Stop and restart your app:

3. node app.js

4. Go back to:
5. 👉 http://localhost:3000/auth/login

6. Try logging in again with:

   • Username: admin
   • Password: admin123

✅ Once you log in successfully, you should see:

Welcome admin (Admin)

Would you like me to guide you next through setting role-based permissions (so only admins can manage users) or build your main dashboard menu (Students, Teachers, Attendance, Fees, etc.) next?

Absolutely 👍 Here’s your cleaned, fully corrected version of app.js — everything in the right order and guaranteed to fix confusing repetition or errors.

Please delete your current app.js contents and replace it completely with this:

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const session = require('express-session');
const authRoutes = require('./routes/auth');
const studentRoutes = require('./routes/students');
const teacherRoutes = require('./routes/teachers');

const app = express();

// --- Middleware Setup ---
app.use(express.urlencoded({ extended: true })); // parses form submissions
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// --- Session Setup ---
app.use(
  session({
    secret: 'school-secret-key',
    resave: false,
    saveUninitialized: true,
  })
);

// --- Database Connection ---
const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ Database error:', err);
  else console.log('✅ SQLite connected successfully');
});

// --- Routes ---
app.use('/auth', authRoutes);
app.use('/students', studentRoutes);
app.use('/teachers', teacherRoutes);

// --- Dashboard (Protected Route) ---
app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.send(
    `<h1>Welcome ${req.session.user.username} (${req.session.user.role})</h1><a href='/auth/logout'>Logout</a>`
  );
});

// --- Home Page ---
app.get('/', (req, res) => {
  res.send(
    '<h1>Welcome to your Offline School Management System 🚀</h1><p><a href="/auth/login">Login</a> | <a href="/students">Students</a> | <a href="/teachers">Teachers</a></p>'
  );
});

// --- Start Server ---
app.listen(3000, () => {
  console.log('🏫 School System running at http://localhost:3000');
});

✅ After Replacing:

1. Save the file.
2. In your terminal:

node app.js

1. Open this link in your browser:
2. 👉 http://localhost:3000/auth/login

This version:

• Keeps middleware and session setup in the right order.
• Ensures the server logs appear correctly.
• Fixes any potential double app.use(express.urlencoded(...)) calls.
• Confirms students, teachers, and auth routes all connect smoothly.

Can you please try it now and tell me what you see when you go to http://localhost:3000/auth/login?

🎉 Amazing work! You now have a fully functional login system — with sessions, authentication, and a working admin account. That’s a huge milestone in your offline School Management System! 🏫💪

You currently have:

✅ Working login (admin / admin123)

✅ Session-based dashboard

✅ Access for students and teachers via routes

✅ Database connected to SQLite offline

Now we can keep building from this foundation. Here are your next big choices:

1. 🔐 Add Role-Based Permissions — Only Admins can add/edit users, teachers, or students. Teachers/Clerks will have limited read-only access.
2. 🧭 Create the Main Dashboard Page — A proper navigable menu: Students, Teachers, Attendance, Exams, Fees, Reports, Logout.
3. 📋 Add Attendance Management — Mark daily attendance stored locally.
4. 💰 Add Fees Management — Record payments, balances, and printable receipts.
5. 🧾 Add Printable Reports (PDF) — Generate local PDF attendance or fees reports offline.

Which one would you like to build next?

Perfect plan 👌 We’ll cover everything, one feature at a time — clean, clear, and working offline.

Let’s start with 1️⃣ Role-Based Permissions so each user type (Admin, Teacher, Accountant, Clerk) has their own powers.

🧩 Step 21: Role-Based Permissions Logic

We’ll protect routes so that:

• 👑 Admin → Full access (can add/edit/delete/view)
• 🧑‍🏫 Teacher → View students and attendance only
• 💰 Accountant → Manage fees
• 🧾 Clerk → Basic entry only (add students, view records)

✅ Step 21A: Create Middleware for Access Control

Create a new folder called middleware in your main project directory:

mkdir middleware

Then create a new file named: middleware/auth.js

Paste this code:

// middleware/auth.js

// Check if the user is logged in
function isAuthenticated(req, res, next) {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  next();
}

// Restrict to specific roles
function authorizeRoles(...allowedRoles) {
  return (req, res, next) => {
    const userRole = req.session.user && req.session.user.role;
    if (!allowedRoles.includes(userRole)) {
      return res.status(403).send('<h1>Access Denied 🚫</h1><p>You do not have permission to view this page.</p><a href="/dashboard">Back to Dashboard</a>');
    }
    next();
  };
}

module.exports = { isAuthenticated, authorizeRoles };

⚙️ Step 21B: Apply Middleware to Routes

In your app.js, import these two functions at the top:

const { isAuthenticated, authorizeRoles } = require('./middleware/auth');

Then apply them like this:

// Protect routes
app.use('/students', isAuthenticated, authorizeRoles('Admin', 'Clerk', 'Teacher'));
app.use('/teachers', isAuthenticated, authorizeRoles('Admin'));

Now:

• Only Admins and Clerks/Teachers can view students.
• Only Admins can manage teachers.

🧠 Step 21C: Test the Roles

You already have the Admin user. Let’s add one more role (e.g., Teacher):

1. Open init_db.js (or open SQLite console later) and temporarily add this:

2. const bcrypt = require('bcrypt');
   const pass = bcrypt.hashSync('teacher123', 10);
   db.run(`INSERT INTO users (username, password_hash, role) VALUES ('teacher', ?, 'Teacher')`, [pass]);

3. Run the file once:

4. node init_db.js

5. (Then remove that insert line to prevent duplicates.)

Now try logging in again with:

• Username: teacher
• Password: teacher123

You’ll see “Access Denied 🚫” if you try to open a restricted route — which means your permissions are working perfectly.

Would you like me to guide you next to:

1. 🌐 Build the main dashboard menu (Step 22), or
2. 🔧 Fine-tune roles and display menus conditionally for each user role?

Excellent — that’s a small and easy one to fix 👍.

You’re getting this error because in your init_db.js, the line:

const bcrypt = require('bcrypt');

was written twice — probably near the top and again later in the file.

Let’s fix it now 👇

🧩 Step 1: Open init_db.js

Find these two lines:

const sqlite3 = require('sqlite3').verbose();
const bcrypt = require('bcrypt');

✅ Keep those only at the top of the file once.

Now scroll down — if you added another const bcrypt = require('bcrypt'); lower in the file, delete that duplicate line.

Your init_db.js should start like this:

const sqlite3 = require('sqlite3').verbose();
const bcrypt = require('bcrypt');

// Connect to DB
const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ Database connection error:', err);
  else console.log('✅ Connected to SQLite database.');
});

🧱 Step 2: Save your file, then run it again:

node init_db.js

You should now see:

✅ Connected to SQLite database.
🏫 All tables created successfully!
🔐 Default login: admin / admin123

After that, you can log in with:

• Username: teacher
• Password: teacher123

Would you like me to show you the next step to build your main dashboard menu (so all roles have their own navigation)?

You're doing great 👍 — I see exactly what’s wrong.

The middleware order needs to be fixed so session handling and authentication work properly. Right now, your app is trying to protect routes before sessions are initialized.

Here’s your corrected and clean version of app.js 👇

(please replace your current file completely with this one):

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const session = require('express-session');
const authRoutes = require('./routes/auth');
const studentRoutes = require('./routes/students');
const teacherRoutes = require('./routes/teachers');
const { isAuthenticated, authorizeRoles } = require('./middleware/auth');

const app = express();

// --- Middleware Setup ---
app.use(express.urlencoded({ extended: true })); // parse form submissions
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// --- Session Setup (must come BEFORE routes) ---
app.use(
  session({
    secret: 'school-secret-key',
    resave: false,
    saveUninitialized: true,
  })
);

// --- Database Connection ---
const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ Database error:', err);
  else console.log('✅ SQLite connected successfully');
});

// --- Authentication & Routes ---
app.use('/auth', authRoutes);

// Apply protections AFTER session
app.use('/students', isAuthenticated, authorizeRoles('Admin', 'Clerk', 'Teacher'), studentRoutes);
app.use('/teachers', isAuthenticated, authorizeRoles('Admin'), teacherRoutes);

// --- Dashboard (Protected Route) ---
app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.send(
    `<h1>Welcome ${req.session.user.username} (${req.session.user.role})</h1><a href='/auth/logout'>Logout</a>`
  );
});

// --- Home Page ---
app.get('/', (req, res) => {
  res.send(
    '<h1>Welcome to your Offline School Management System 🚀</h1><p><a href="/auth/login">Login</a> | <a href="/students">Students</a> | <a href="/teachers">Teachers</a></p>'
  );
});

// --- Start Server ---
app.listen(3000, () => {
  console.log('🏫 School System running at http://localhost:3000');
});

✅ Why this version works:

• Sessions are initialized before your protected routes (so req.session.user exists).
• Middleware and static files load in the correct order.
• Route protection middleware now sits inside the route definition instead of globally before session.

Now, re-run your server:

node app.js

Then go to:

👉 http://localhost:3000/auth/login

You should be able to:

• Log in as admin or teacher
• Access routes based on role (Admin → all; Teacher → limited).

Would you like me to now help you add a dashboard menu webpage so every role sees its own options (like Students / Attendance / Logout)?

Awesome 👏 Let’s design your main dashboard menu page, which appears right after login and lets each role see their allowed modules.

🧱 Step 23: Create a Dashboard Template

Create a new file in your views folder named dashboard.ejs.

Paste this code:

<!DOCTYPE html>
<html>
<head>
  <title>School Dashboard</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .container { max-width: 800px; background: white; margin: 50px auto; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
    h1 { text-align: center; }
    .menu { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
    .menu a {
      display: inline-block;
      text-decoration: none;
      background: #007BFF; color: white;
      padding: 15px 25px;
      margin: 10px;
      border-radius: 8px;
      transition: 0.3s ease;
    }
    .menu a:hover { background: #0056b3; }
    .logout { text-align: center; margin-top: 20px; }
    .role { background-color: #eee; padding: 10px; border-radius: 5px; text-align: center; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome <%= user.username %></h1>
    <p class="role"><strong>Role:</strong> <%= user.role %></p>

    <div class="menu">
      <% if (user.role === 'Admin' || user.role === 'Clerk' || user.role === 'Teacher') { %>
        <a href="/students">Students</a>
      <% } %>

      <% if (user.role === 'Admin') { %>
        <a href="/teachers">Teachers</a>
        <a href="/auth/manage-users">Users</a>
      <% } %>

      <% if (user.role === 'Teacher' || user.role === 'Admin') { %>
        <a href="/attendance">Attendance</a>
      <% } %>

      <% if (user.role === 'Accountant' || user.role === 'Admin') { %>
        <a href="/fees">Fees</a>
      <% } %>

      <% if (user.role === 'Admin' || user.role === 'Accountant' || user.role === 'Teacher') { %>
        <a href="/reports">Reports</a>
      <% } %>
    </div>

    <div class="logout">
      <a href="/auth/logout">Logout</a>
    </div>
  </div>
</body>
</html>

⚙️ Step 24: Update the Dashboard Route

In your routes/auth.js (or app.js if you use dashboard there), update the dashboard route so it renders this view instead of sending text:

Replace the old /dashboard route with this:

router.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.render('dashboard', { user: req.session.user });
});

If your dashboard route is in app.js instead, just keep it there and do:

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.render('dashboard', { user: req.session.user });
});

▶️ Step 25: Test It

Restart your app:

node app.js

Then log in at:

👉 http://localhost:3000/auth/login

If you log in as admin, you’ll see:

• Links for Students, Teachers, Attendance, Fees, Reports, and Users.

If you log in as teacher, you’ll see:

• Students, Attendance, and Reports only.

If you log in as accountant, you’ll see:

• Fees and Reports.

If you log in as clerk, you’ll see:

• Students only.

✅ Boom! You now have a dynamic, role-based dashboard menu that updates automatically by user role.

Would you like to continue next with Attendance Management or create the CRUD interface for Users (Manage Staff and Roles) next?

Here are your current login details, based on the users you created in your database:

👑 Admin Account

• Username: admin
• Password: admin123
• Role: Admin
• Full access — can view and edit everything (students, teachers, attendance, fees, reports, and users).

🧑‍🏫 Teacher Account (if you added it as shown earlier)

• Username: teacher
• Password: teacher123
• Role: Teacher
• Limited access — can view Students, mark Attendance, and view Reports.

If you haven’t added the teacher account yet, you can create it manually via a quick database setup:

✅ Add Teacher User Manually (only once):

node

Then in the Node console:

const sqlite3 = require('sqlite3').verbose();
const bcrypt = require('bcrypt');
const db = new sqlite3.Database('./database.sqlite');
const pass = bcrypt.hashSync('teacher123', 10);
db.run(`INSERT INTO users (username, password_hash, role) VALUES ('teacher', ?, 'Teacher')`, [pass]);

Then exit the console with:

.exit

Now you can log in with both:

• admin / admin123
• teacher / teacher123

Would you like me to help you add Accountant and Clerk login accounts next? 💼

✅ Perfect — that means your login is working 100% correctly! 🎉

You’re now logged in as the Admin, and the system is reading your session properly.

Right now, it’s showing <h1>Welcome admin (Admin)</h1> <a href='/auth/logout'>Logout</a> because it’s still the basic dashboard response from your app.js.

Let’s now replace that plain text with your full dashboard menu (the nice HTML one you can click around on).

🧩 Step 1: Open your app.js

Find this section:

res.send(`<h1>Welcome ${req.session.user.username} (${req.session.user.role})</h1><a href='/auth/logout'>Logout</a>`);

Delete that line and replace it with:

res.render('dashboard', { user: req.session.user });

🧩 Step 2: Make sure the following file exists

File: views/dashboard.ejs

If you don’t have it yet, create it and paste this:

<!DOCTYPE html>
<html>
<head>
  <title>School Dashboard</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .container { max-width: 800px; background: white; margin: 50px auto; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
    h1 { text-align: center; }
    .menu { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
    .menu a {
      display: inline-block; text-decoration: none;
      background: #007BFF; color: white;
      padding: 15px 25px; margin: 10px;
      border-radius: 8px; transition: 0.3s;
    }
    .menu a:hover { background: #0056b3; }
    .logout { text-align: center; margin-top: 20px; }
    .role { background-color: #eee; padding: 10px; border-radius: 5px; text-align: center; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome <%= user.username %></h1>
    <p class="role"><strong>Role:</strong> <%= user.role %></p>

    <div class="menu">
      <% if (user.role === 'Admin' || user.role === 'Clerk' || user.role === 'Teacher') { %>
        <a href="/students">Students</a>
      <% } %>

      <% if (user.role === 'Admin') { %>
        <a href="/teachers">Teachers</a>
        <a href="/auth/manage-users">Manage Users</a>
      <% } %>

      <% if (user.role === 'Teacher' || user.role === 'Admin') { %>
        <a href="/attendance">Attendance</a>
      <% } %>

      <% if (user.role === 'Accountant' || user.role === 'Admin') { %>
        <a href="/fees">Fees</a>
      <% } %>

      <% if (user.role === 'Admin' || user.role === 'Accountant' || user.role === 'Teacher') { %>
        <a href="/reports">Reports</a>
      <% } %>
    </div>

    <div class="logout">
      <a href="/auth/logout">Logout</a>
    </div>
  </div>
</body>
</html>

🧩 Step 3: Save both files and restart your app

node app.js

Then log in again with admin / admin123.

💡 You’ll now see your customizable Dashboard Menu Interface that adapts automatically depending on user role.

Would you like me to help you build Attendance Management next? (where teachers can mark daily attendance).

Excellent — I see exactly what broke it 👍. Your /dashboard route is missing one small }); to close the block before defining the home (/) route.

Here’s your fixed version, fully corrected and neatly formatted:

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const session = require('express-session');
const authRoutes = require('./routes/auth');
const studentRoutes = require('./routes/students');
const teacherRoutes = require('./routes/teachers');
const { isAuthenticated, authorizeRoles } = require('./middleware/auth');

const app = express();

// --- Middleware Setup ---
app.use(express.urlencoded({ extended: true })); // parse form submissions
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// --- Session Setup (must come BEFORE routes) ---
app.use(
  session({
    secret: 'school-secret-key',
    resave: false,
    saveUninitialized: true,
  })
);

// --- Database Connection ---
const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ Database error:', err);
  else console.log('✅ SQLite connected successfully');
});

// --- Authentication & Routes ---
app.use('/auth', authRoutes);

// Apply protections AFTER session
app.use('/students', isAuthenticated, authorizeRoles('Admin', 'Clerk', 'Teacher'), studentRoutes);
app.use('/teachers', isAuthenticated, authorizeRoles('Admin'), teacherRoutes);

// --- Dashboard (Protected Route) ---
app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.render('dashboard', { user: req.session.user });
}); // ✅ This closing brace was missing

// --- Home Page ---
app.get('/', (req, res) => {
  res.send(
    '<h1>Welcome to your Offline School Management System 🚀</h1><p><a href="/auth/login">Login</a> | <a href="/students">Students</a> | <a href="/teachers">Teachers</a></p>'
  );
});

// --- Start Server ---
app.listen(3000, () => {
  console.log('🏫 School System running at http://localhost:3000');
});

✅ Now do this:

1. Save your file.
2. In PowerShell, stop and restart the app:

node app.js

1. Go to http://localhost:3000/auth/login, log in as admin / admin123, and it will now take you to your dashboard page.

Would you like to move forward now and build the Attendance Management feature next?

✅ Yes, right now it’s normal if the dashboard looks empty or only says “Welcome admin” — it means the backend route is working perfectly.

The next step is to replace that empty dashboard view with your full visual dashboard menu. This part is what makes it look professional and clickable.

Let’s add your dashboard menu page now.

🧱 Step 1: Create the file

In your project, go to the folder:

views/

Then create a new file named:

dashboard.ejs

📄 Step 2: Paste this complete dashboard code

<!DOCTYPE html>
<html>
<head>
  <title>School Dashboard</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .container { max-width: 800px; background: white; margin: 50px auto; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
    h1 { text-align: center; }
    .menu { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
    .menu a {
      display: inline-block; text-decoration: none;
      background: #007BFF; color: white;
      padding: 15px 25px; margin: 10px;
      border-radius: 8px; transition: 0.3s;
    }
    .menu a:hover { background: #0056b3; }
    .logout { text-align: center; margin-top: 20px; }
    .role { background-color: #eee; padding: 10px; border-radius: 5px; text-align: center; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome <%= user.username %></h1>
    <p class="role"><strong>Role:</strong> <%= user.role %></p>

    <div class="menu">
      <% if (user.role === 'Admin' || user.role === 'Clerk' || user.role === 'Teacher') { %>
        <a href="/students">Students</a>
      <% } %>

      <% if (user.role === 'Admin') { %>
        <a href="/teachers">Teachers</a>
        <a href="/auth/manage-users">Manage Users</a>
      <% } %>

      <% if (user.role === 'Teacher' || user.role === 'Admin') { %>
        <a href="/attendance">Attendance</a>
      <% } %>

      <% if (user.role === 'Accountant' || user.role === 'Admin') { %>
        <a href="/fees">Fees</a>
      <% } %>

      <% if (user.role === 'Admin' || user.role === 'Accountant' || user.role === 'Teacher') { %>
        <a href="/reports">Reports</a>
      <% } %>
    </div>

    <div class="logout">
      <a href="/auth/logout">Logout</a>
    </div>
  </div>
</body>
</html>

▶️ Step 3: Restart and log in

1. Save the file.
2. Stop and restart your app:

node app.js

1. Log in again at:
2. 👉 http://localhost:3000/auth/login

✅ You’ll now see a nice dashboard menu with clickable boxes for Students, Teachers, Attendance, Fees, Reports, and Logout.

Would you like us to now move on to Attendance Management next?

Got it 🙂 — if the dashboard is completely white, it means the EJS HTML is loading, but there’s either:

• no <body> content being rendered due to syntax issues, or
• your EJS tags didn’t process properly (perhaps <% ... %> got mangled when saving), or
• there’s a missing variable (user) when rendering.

Let’s troubleshoot quickly 👇

✅ Step 1: Make sure the code was pasted exactly

Open your views/dashboard.ejs and make sure the very first line is:

<!DOCTYPE html>

And the last line is:

</html>

There must not be any extra characters, weird spaces, or “smart quotes” (“ or ”). They must all be plain quotes (").

✅ Step 2: Check your /dashboard route

In your app.js, confirm this looks exactly like:

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.render('dashboard', { user: req.session.user });
});

That { user: req.session.user } is what gives EJS access to <%= user.username %>.

✅ Step 3: Add a quick debug check

Add this line inside your dashboard <body> in dashboard.ejs temporarily:

<%= JSON.stringify(user) %>

Then refresh your dashboard in the browser.

• If you see something like {"id":1,"username":"admin","role":"Admin"...} → great.
• If it’s blank, then the session isn’t being passed correctly (we’ll fix that next).

✅ Step 4: Quick fix if user is missing

Open your routes/auth.js (or wherever you handle login) and make sure the login success code sets the session:

if (bcrypt.compareSync(password, user.password_hash)) {
  req.session.user = user; // ✅ This line must exist
  res.redirect('/dashboard');
}

After saving everything:

1. Stop the server (Ctrl + C)
2. Restart: node app.js
3. Log in again: http://localhost:3000/auth/login

If you still see white, go back to your browser and press F12 → Console — do you see any red errors there (like Unexpected token < or Cannot read property username)?

If so, please copy what it says, and I’ll fix it instantly.

Would you like me to give you a minimal version of the dashboard (simplified HTML, no conditions) to test that it shows something right away?

Perfect 👏 That means the EJS template didn’t render properly — Express is showing the file as plain text instead of converting <% %> code.

Let’s fix it — this happens for one of three reasons, and I’ll walk you through the quick checks.

✅ Step 1: Make sure you installed and configured EJS

1. In your CMD (inside your school-system folder), run this command to make sure EJS is installed:

2. npm install ejs

3. Now open your app.js and make sure these two lines exist near the top:

4. app.set('view engine', 'ejs');
   app.set('views', path.join(__dirname, 'views'));

5. ✅ If not — copy and paste both lines exactly.

✅ Step 2: Check your file location and extension

• The file must be named dashboard.ejs, not dashboard.html.
• It must be inside a folder called views (same folder level as app.js):

• school-system/
  ├── app.js
  ├── views/
  │   └── dashboard.ejs

✅ Step 3: Ensure you’re using the render command

In your app.js, the /dashboard route must look exactly like this:

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.render('dashboard', { user: req.session.user }); // 🔥 Must use render, not send
});

If you accidentally have res.send('dashboard'), replace it with res.render('dashboard', ...).

✅ Step 4: Restart your server

Stop it (Ctrl + C) and restart:

node app.js

Then log in again at:

👉 http://localhost:3000/auth/login

✅ You should now see your full rendered dashboard (blue buttons, menu links, etc.), and the red <% %> text will disappear.

If it still shows red text, please look at the top of PowerShell for any red error (like “EJS failed to compile”) and paste it here — I’ll fix it immediately for you.

Would you like me to send you a small EJS test template (just a few lines) to confirm EJS rendering works before reloading the full dashboard?

Alright 👍 — since your dashboard is still blank, let’s rule out everything methodically so it finally renders.

Here’s a simple diagnostic plan that will show if EJS is working or if no data is being passed to it.

🧩 Step 1: Create a simple test page

Go to your views folder and create a new file called:

test.ejs

Paste this inside:

<!DOCTYPE html>
<html>
<body>
  <h1>✅ EJS Rendering Test</h1>
  <p>This page proves that EJS is working correctly.</p>
  <p>User: <%= user ? user.username : 'No user' %></p>
</body>
</html>

🧩 Step 2: Add a test route in app.js

Paste this anywhere near the bottom before the app.listen() line:

app.get('/test', (req, res) => {
  res.render('test', { user: { username: 'admin', role: 'Admin' } });
});

🧩 Step 3: Restart the server

node app.js

Then open this in your browser:

👉 http://localhost:3000/test

✅ Expected result:

A simple page should appear with this text:

✅ EJS Rendering Test
User: admin

If that test page works correctly, EJS is fine. The problem is only how /dashboard is rendered.

🧠 Step 4: If /test works, fix your /dashboard route

Make sure your /dashboard route in app.js looks exactly like this:

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }

  // Pass user session data to EJS template
  console.log('Rendering dashboard for user:', req.session.user); // debug log
  res.render('dashboard', { user: req.session.user });
});

Now after logging in, check your terminal — it should print something like:

Rendering dashboard for user: { id: 1, username: 'admin', role: 'Admin', ... }

If it does print that, but the page is still blank, your issue is purely inside dashboard.ejs.

Would you like me to send you a minimal dashboard.ejs file that will always show visible text, just to confirm it’s working?

🎉 Amazing — that’s perfect! That means EJS is working correctly, and your system can render templates just fine.

So the problem isn’t with EJS — it’s that your /dashboard route isn’t sending data to the EJS file when you log in.

We’ll fix that right now 💪.

🧠 Step 1: Open routes/auth.js

Find this part of your login function (looks similar to this):

if (bcrypt.compareSync(password, user.password_hash)) {
  req.session.user = user;
  res.redirect('/dashboard');
}

✅ Make sure that req.session.user = user; is exactly like that — no typos, no missing lines.

That’s what passes the logged-in user to the dashboard.

🧱 Step 2: Fix /dashboard in app.js

Check your app.js and make sure this part looks exactly like this:

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }

  console.log('Rendering dashboard for user:', req.session.user); // Debug line
  res.render('dashboard', { user: req.session.user });
});

🧩 Step 3: Simplify the dashboard for now

Edit your views/dashboard.ejs and temporarily replace everything with this minimal code:

<!DOCTYPE html>
<html>
<head><title>Dashboard Test</title></head>
<body>
  <h1>Welcome Dashboard Page 🏫</h1>
  <p>User: <%= user.username %></p>
  <p>Role: <%= user.role %></p>
  <a href="/auth/logout">Logout</a>
</body>
</html>

Then restart your server:

node app.js

Log in again at: http://localhost:3000/auth/login

✅ You should now see:

Welcome Dashboard Page 🏫
User: admin
Role: Admin

If this works, we can safely add back your full blue-button menu version after confirming this base line works.

Can you try that version and tell me what text you see on the dashboard now after you log in?

✅ Great question — yes, you can safely remove both now that we’ve confirmed EJS works.

Here’s what you should do 👇

🧹 Step 1: Delete the test file

In your views folder, delete this file:

test.ejs

You won’t need it anymore.

🧹 Step 2: Remove the test route from app.js

Open your app.js and look for this line:

app.get('/test', (req, res) => {
  res.render('test', { user: { username: 'admin', role: 'Admin' } });
});

Delete that entire code block.

✅ Step 3: Keep your working dashboard code

Make sure your /dashboard route still looks like this:

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }
  res.render('dashboard', { user: req.session.user });
});

After removing the test file and code:

1. Save everything.
2. Restart your app with:

node app.js

1. Log in again at http://localhost:3000/auth/login.

You’ll now have a clean system — no test route, just your working secure login and dashboard ready for the next feature.

Would you like me to help you with Attendance Management next (where Teachers mark daily attendance)?

🎉 Fantastic!!! You nailed it. Your Dashboard is finally working — EJS is rendering perfectly, sessions are passing data, and authentication is running smoothly.

This means your system’s foundation is rock-solid now 🧱 — database, server, and login layers are all perfectly synced.

Here’s what you’ve achieved so far:

✅ Node.js server running offline

✅ SQLite database integrated

✅ Login system (Admin + roles ready)

✅ Dashboard working and dynamic

🚀 Next goal

Now we can start expanding your system. You have two great paths forward:

1. 🗓️ Attendance Management System – Teachers can mark daily presence, view reports, stored offline.
2. 👥 Add more users (Accountant & Clerk) – including login credentials and restricted dashboards.

Which one would you like to build next — Attendance Management or Adding Accountant/Clerk accounts?

Perfect question 👏 — and no worries at all! The simplified dashboard you added was just a temporary test to confirm that EJS and user data were working.

✅ It doesn’t harm anything — in fact, it helped prove your setup is correct.

What it did:

• Replaced your fancy blue menu with a basic line saying:

• Welcome Dashboard Page 🏫
  User: admin
  Role: Admin

• Confirmed your dashboard route and session data are working properly.

Now that it’s working, you can safely replace that minimal version with the full blue dashboard menu version (the nicer interface with links for Students, Teachers, Attendance, Fees, Reports, etc.).

Would you like me to give you the correct full dashboard menu code again so you can paste it now?

Perfect 👌 — here’s the full, polished blue dashboard version you can now safely use in your views/dashboard.ejs file.

Replace everything in your file with this code:

<!DOCTYPE html>
<html>
<head>
  <title>School Dashboard</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; }
    .container { max-width: 850px; background: white; margin: 80px auto; padding: 30px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.2); }
    h1 { text-align: center; color: #333; }
    .role { background: #eee; padding: 10px; border-radius: 5px; text-align: center; color: #555; }
    .menu { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
    .menu a {
      display: block;
      text-decoration: none;
      background: #007BFF;
      color: white;
      padding: 15px 25px;
      margin: 10px;
      border-radius: 8px;
      font-size: 18px;
      box-shadow: 0 3px 5px rgba(0,0,0,0.2);
      transition: 0.3s;
    }
    .menu a:hover { background: #0056b3; transform: translateY(-2px); }
    .logout { text-align: center; margin-top: 30px; }
    .logout a { text-decoration: none; color: #FF3B3B; font-weight: bold; }
    .logout a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome <%= user.username %></h1>
    <p class="role"><strong>Role:</strong> <%= user.role %></p>

    <div class="menu">
      <% if (user.role === 'Admin' || user.role === 'Clerk' || user.role === 'Teacher') { %>
        <a href="/students">Students</a>
      <% } %>

      <% if (user.role === 'Admin') { %>
        <a href="/teachers">Teachers</a>
        <a href="/auth/manage-users">Manage Users</a>
      <% } %>

      <% if (user.role === 'Teacher' || user.role === 'Admin') { %>
        <a href="/attendance">Attendance</a>
      <% } %>

      <% if (user.role === 'Accountant' || user.role === 'Admin') { %>
        <a href="/fees">Fees</a>
      <% } %>

      <% if (user.role === 'Admin' || user.role === 'Accountant' || user.role === 'Teacher') { %>
        <a href="/reports">Reports</a>
      <% } %>
    </div>

    <div class="logout">
      <a href="/auth/logout">Logout</a>
    </div>
  </div>
</body>
</html>

✅ How to apply safely

1. Save this file as views/dashboard.ejs.
2. Restart your system in CMD:

3. node app.js

4. Log in again at http://localhost:3000/auth/login

You’ll now see the complete dashboard with blue navigation buttons — changing based on user role.

Would you like to move on to the Attendance Management feature next (so Teachers can mark students)?

Perfect 👏 Time to add the Attendance Management System — this will let a Teacher or an Admin mark each student as Present or Absent each day, fully offline.

We’ll do this in three short steps:

🧾 Step 1: Create the Attendance Route

In your routes folder, create a new file named:

attendance.js

Paste this code:

const express = require('express');
const router = express.Router();
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('./database.sqlite');

// List attendance for today
router.get('/', (req, res) => {
  const today = new Date().toISOString().split('T')[0];

  db.all('SELECT * FROM students', [], (err, students) => {
    if (err) return res.send('Database error');
    res.render('attendance/list', { students, today });
  });
});

// Mark attendance for today
router.post('/', (req, res) => {
  const { attendanceDate } = req.body;
  const attendanceData = req.body;

  Object.keys(attendanceData).forEach((studentId) => {
    if (studentId.startsWith('status_')) {
      const id = studentId.split('_')[1];
      const status = attendanceData[studentId];
      db.run(
        'INSERT INTO attendance (student_id, date, status) VALUES (?, ?, ?)',
        [id, attendanceDate, status],
        (err) => {
          if (err) console.error(err);
        }
      );
    }
  });

  res.redirect('/attendance');
});

module.exports = router;

🧱 Step 2: Add Attendance View

Create a new folder in views called:

attendance

Inside it, create a file named:

list.ejs

Paste this code:

<!DOCTYPE html>
<html>
<head>
  <title>Attendance - School System</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f9f9f9; }
    .container { max-width: 800px; background: white; margin: 50px auto; padding: 20px; border-radius: 8px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
    th { background-color: #007BFF; color: white; }
    button { padding: 10px 15px; background-color: #28a745; color: white; border: none; border-radius: 5px; }
    button:hover { background-color: #218838; }
  </style>
</head>
<body>
  <div class="container">
    <h2>Mark Attendance for <%= today %></h2>

    <form method="POST" action="/attendance">
      <input type="hidden" name="attendanceDate" value="<%= today %>">

      <table>
        <tr><th>ID</th><th>Name</th><th>Status</th></tr>
        <% students.forEach(student => { %>
          <tr>
            <td><%= student.id %></td>
            <td><%= student.name %></td>
            <td>
              <label><input type="radio" name="status_<%= student.id %>" value="Present"> Present</label>
              <label><input type="radio" name="status_<%= student.id %>" value="Absent"> Absent</label>
            </td>
          </tr>
        <% }) %>
      </table>

      <br>
      <button type="submit">Save Attendance</button>
    </form>
  </div>
</body>
</html>

⚙️ Step 3: Register the Attendance Route in your app.js

Add this line near your other route imports:

const attendanceRoutes = require('./routes/attendance');

Then register the route below your others:

app.use('/attendance', isAuthenticated, authorizeRoles('Admin', 'Teacher'), attendanceRoutes);

🧠 Step 4: Restart and Test

In PowerShell:

node app.js

Log in as admin or teacher, then open:

👉 http://localhost:3000/attendance

✅ You’ll see a list of students with radio buttons to mark Present or Absent for today.

After clicking Save Attendance, it saves the results in your database.

Would you like me to now help you add a View Attendance Reports page (to review past attendance days and totals)?

Good catch 💪 That error means your isAuthenticated middleware in middleware/auth.js is trying to check req.session.user before the session exists — usually because the session setup happens after middleware is used, or req.session itself is undefined in that function.

Let's fix it cleanly 👇

✅ Step 1: Edit your middleware file middleware/auth.js

Open this file and replace everything with the following safe version:

// middleware/auth.js

function isAuthenticated(req, res, next) {
  // ✅ make sure session exists first
  if (!req.session || !req.session.user) {
    return res.redirect('/auth/login');
  }
  next();
}

function authorizeRoles(...allowedRoles) {
  return (req, res, next) => {
    if (!req.session || !req.session.user) {
      return res.redirect('/auth/login');
    }

    const userRole = req.session.user.role;
    if (!allowedRoles.includes(userRole)) {
      return res.status(403).send('<h1>Access Denied 🚫</h1><p><a href="/dashboard">Back to Dashboard</a></p>');
    }
    next();
  };
}

module.exports = { isAuthenticated, authorizeRoles };

✅ This prevents your app from crashing if req.session is missing.

✅ Step 2: Confirm session middleware is before routes

In your app.js, make sure this block is above any route definitions:

app.use(
  session({
    secret: 'school-secret-key',
    resave: false,
    saveUninitialized: true,
  })
);

It needs to appear before you call:

app.use('/students', ...);
app.use('/attendance', ...);

✅ Step 3: Restart and test

Save all files and restart your server:

node app.js

Then log in again and visit:

👉 http://localhost:3000/attendance

You should now see your attendance page without that error popping up.

Would you like me to show you how to build the Attendance Report (viewing totals and past days) next?

Excellent — I see what’s going on 👍. The issue is that your session middleware is below the attendance route and other protected routes. Because of that, req.session doesn’t exist yet when those middlewares run (causing the previous errors like 'req.session.user' undefined).

Let’s fix it by rearranging the order — sessions must always come before any route or protection middleware.

✅ Here’s your corrected and safe app.js

Replace your current file with this version:

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const session = require('express-session');
const authRoutes = require('./routes/auth');
const studentRoutes = require('./routes/students');
const teacherRoutes = require('./routes/teachers');
const { isAuthenticated, authorizeRoles } = require('./middleware/auth');
const attendanceRoutes = require('./routes/attendance');

const app = express();

// --- Middleware Setup ---
app.use(express.urlencoded({ extended: true })); // parse form submissions
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// --- Session Setup (must come BEFORE routes) ---
app.use(
  session({
    secret: 'school-secret-key',
    resave: false,
    saveUninitialized: true,
  })
);

// --- Database Connection ---
const db = new sqlite3.Database('./database.sqlite', (err) => {
  if (err) console.error('❌ Database error:', err);
  else console.log('✅ SQLite connected successfully');
});

// --- Authentication & Routes ---
app.use('/auth', authRoutes);

// Apply protections AFTER session
app.use('/students', isAuthenticated, authorizeRoles('Admin', 'Clerk', 'Teacher'), studentRoutes);
app.use('/teachers', isAuthenticated, authorizeRoles('Admin'), teacherRoutes);
app.use('/attendance', isAuthenticated, authorizeRoles('Admin', 'Teacher'), attendanceRoutes);

// --- Dashboard (Protected Route) ---
app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/auth/login');
  }

  console.log('Rendering dashboard for user:', req.session.user); // Debug line
  res.render('dashboard', { user: req.session.user });
});

// --- Home Page ---
app.get('/', (req, res) => {
  res.send(
    '<h1>Welcome to your Offline School Management System 🚀</h1><p><a href="/auth/login">Login</a> | <a href="/students">Students</a> | <a href="/teachers">Teachers</a></p>'
  );
});

// --- Start Server ---
app.listen(3000, () => {
  console.log('🏫 School System running at http://localhost:3000');
});

✅ Why this fixes it

• The session setup now comes before every route, so req.session and req.session.user always exist.
• All your protected routes (students, teachers, attendance) now safely use the session.

Now just:

1. Save this file.
2. Run:

node app.js

1. Log in and visit your attendance page:
2. 👉 http://localhost:3000/attendance

You should see the attendance table with students listed 💪.

Would you like me to guide you next on adding the Attendance Report page (so you can view and filter past records)?

That means everything is finally running perfectly — and you’ve just built a real working offline school management system 🎉👏

You did all the hard work step by step. I’m truly glad I could guide you through it — you’ve come very far with this project! 🙌

✨ Anytime you’re ready to continue, we can:

• Add attendance reports, fees, or exams,
• Improve the design,
• Or turn it into a full standalone desktop-style app that opens with one click.

Take a break — you’ve definitely earned it 😊

You’re very welcome! 😊 You’ve done an incredible job getting this far — everything’s working perfectly and saved locally on your computer.

Whenever you’re ready to continue, just come back and we’ll pick up right where we left off (fees, attendance reports, or even packaging it as a desktop app). 🖥️💪

Take a well-earned break — see you soon! 👋

Awesome choice 💪 — polishing the design will make your system feel professional and ready to showcase.

We’ll focus on giving it a clean, modern school dashboard style with blue tones, rounded cards, and an easy navigation layout — all fully offline so you don’t need internet.

🧱 Step 1: Add a main CSS file

In your project, make this structure if you haven’t yet:

public/css/style.css

Then put this inside style.css:

/* General layout */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: #eef1f5;
  margin: 0;
  padding: 0;
}

nav {
  background-color: #007BFF;
  color: white;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav h1 {
  margin: 0;
  font-size: 24px;
}

nav a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1000px;
  background: white;
  margin: 40px auto;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h2, h3 {
  color: #333;
  border-bottom: 2px solid #007BFF;
  padding-bottom: 8px;
}

button, .btn {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
}

button:hover, .btn:hover {
  background-color: #0056b3;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table th, .table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.table th {
  background-color: #007BFF;
  color: white;
}

.alert {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
}

.footer {
  text-align: center;
  color: #777;
  padding: 20px 0;
  border-top: 1px solid #ddd;
  margin-top: 40px;
}

🧱 Step 2: Update your EJS layout (Reusable header/footer)

Let’s make a clean layout file to be used by all your pages.

In your views folder, create a new file:

layout.ejs

Paste this inside:

<!DOCTYPE html>
<html>
<head>
  <title><%= title || 'School System' %></title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <nav>
    <h1>📘 School System</h1>
    <div>
      <a href="/dashboard">Dashboard</a>
      <a href="/students">Students</a>
      <a href="/teachers">Teachers</a>
      <a href="/attendance">Attendance</a>
      <a href="/fees">Fees</a>
      <a href="/reports">Reports</a>
      <a href="/auth/logout">Logout</a>
    </div>
  </nav>

  <div class="container">
    <% include(content) %>
  </div>

  <div class="footer">© <%= new Date().getFullYear() %> Offline School System</div>
</body>
</html>

🧱 Step 3: Apply it to your dashboard

Now open your views/dashboard.ejs and make it use the new layout:

<%- include('layout', { content: 'dashboard_content' }) %>

Then create a new file next to it:

views/dashboard_content.ejs

Paste this:

<h2>Welcome <%= user.username %></h2>
<p class="alert">Role: <strong><%= user.role %></strong></p>
<div class="menu">
  <% if (user.role === 'Admin' || user.role === 'Clerk' || user.role === 'Teacher') { %>
    <a class="btn" href="/students">Student Management</a>
  <% } %>

  <% if (user.role === 'Teacher' || user.role === 'Admin') { %>
    <a class="btn" href="/attendance">Attendance</a>
  <% } %>

  <% if (user.role === 'Admin') { %>
    <a class="btn" href="/teachers">Teacher Management</a>
  <% } %>

  <% if (user.role === 'Accountant' || user.role === 'Admin') { %>
    <a class="btn" href="/fees">Fees Module</a>
  <% } %>
</div>

🧠 Step 4: Restart the app

node app.js

Visit http://localhost:3000/dashboard

✅ Your pages will now have:

• A consistent blue header navigation bar
• Centralized content with stylish cards/buttons
• Responsive, professional layout

Would you like me to help extend this design across all pages (students, teachers, attendance, etc.) next?

Excellent question 👍 — that line goes inside your current dashboard EJS file to tell Express that this page should include the layout wrapper.

Here’s exactly how to do it 👇

🧩 Step-by-Step Placement

1. Open your file:

2. views/dashboard.ejs

3. Delete all of the existing HTML you currently have in that file.
4. Replace it with only this single line:

5. <%- include('layout', { content: 'dashboard_content' }) %>

✅ That’s it — the layout file (layout.ejs) will now automatically surround your dashboard_content.ejs template.

🧠 How it works

• You’re telling EJS: “Render the layout, and inside it, load the file named dashboard_content.ejs.”
• So make sure you also created:

• views/dashboard_content.ejs

• with the dashboard content inside (your role info, menu buttons, etc.).

After saving both files, restart your app:

node app.js

Then go to:

👉 http://localhost:3000/dashboard

You’ll now see a stylish dashboard inside your new layout (blue header, white center, and footer). 🎨

Would you like me to now show you how to reuse the same layout for students, teachers, and attendance pages too?

Perfect 👍 — this error is easy to fix. It just means EJS is looking for the variable title inside your layout but it’s not being passed from dashboard.ejs.

We’ll fix it in two simple ways — either remove the title variable requirement or send it explicitly when rendering.

✅ Option 1: Simplest Fix (remove the variable check)

Edit your layout.ejs (found in views/layout.ejs) and change the first line inside <head> from this:

<title><%= title || 'School System' %></title>

To this simpler one that doesn’t depend on a variable:

<title>School System</title>

✅ This is the easiest and cleanest solution for now. The page title will just always say “School System.”

🧠 Option 2: (Optional) Pass the title variable properly

If you prefer to keep <%= title || 'School System' %>, then open your dashboard.ejs file and modify your include line to pass a title:

<%- include('layout', { content: 'dashboard_content', title: 'Dashboard' }) %>

That way, dashboard.ejs explicitly tells layout.ejs what title to display.

✅ Step 2: Restart and test

After saving, restart your app:

node app.js

Then visit:

👉 http://localhost:3000/dashboard

Your dashboard should now render beautifully — no more title is not defined error.

Would you like me to show you next how to reuse this design (header, footer, menu) across your Students, Teachers, and Attendance pages too?

Absolutely 👏 We can switch your layout to use a sidebar navigation dashboard — just like modern admin panels. It will look cleaner and give more space for the main content.

We’ll make it look like this concept:

--------------------------------------------------
| 📘 Sidebar | Main Content Area (Dashboard Info) |
|------------|------------------------------------|
| Students   |                                    |
| Teachers   |      Welcome admin (Admin)         |
| Attendance |      Dynamic dashboard buttons     |
| Fees       |                                    |
| Reports    |                                    |
| Logout     |                                    |
--------------------------------------------------

Let’s build it 👇

🧱 Step 1: Edit your views/layout.ejs

Replace the whole file with this code:

<!DOCTYPE html>
<html>
<head>
  <title><%= title || 'School System' %></title>
  <link rel="stylesheet" href="/css/style.css">
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Arial, sans-serif;
      background-color: #f4f6f9;
      display: flex;
    }

    /* Sidebar */
    .sidebar {
      width: 230px;
      background-color: #004aad;
      color: white;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 15px;
    }

    .sidebar h2 {
      width: 100%;
      text-align: center;
      margin-top: 0;
      margin-bottom: 25px;
      border-bottom: 2px solid #0063d1;
      padding-bottom: 10px;
    }

    .sidebar a {
      text-decoration: none;
      color: white;
      font-weight: 500;
      display: block;
      padding: 10px 15px;
      width: 100%;
      border-radius: 6px;
      margin: 5px 0;
      transition: 0.3s;
    }

    .sidebar a:hover {
      background-color: #005be0;
    }

    .main-content {
      margin-left: 230px;
      padding: 30px;
      flex: 1;
    }

    .footer {
      text-align: center;
      padding: 10px;
      color: #777;
      border-top: 1px solid #ccc;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <h2>📘 School MIS</h2>
    <a href="/dashboard">🏠 Dashboard</a>
    <a href="/students">👨‍🎓 Students</a>
    <a href="/teachers">👩‍🏫 Teachers</a>
    <a href="/attendance">🗓️ Attendance</a>
    <a href="/fees">💰 Fees</a>
    <a href="/reports">📊 Reports</a>
    <a href="/auth/logout">🚪 Logout</a>
  </div>

  <div class="main-content">
    <% include(content) %>
    <div class="footer">© <%= new Date().getFullYear() %> Offline School System</div>
  </div>
</body>
</html>

🧱 Step 2: Update your dashboard_content.ejs

Replace its contents with this:

<h2>Welcome, <%= user.username %></h2>
<p>Role: <strong><%= user.role %></strong></p>

<div class="cards">
  <div style="background: #007bff; color:white; padding:20px; display:inline-block; border-radius:10px; margin:10px;">
    <h3>Students</h3>
    <p>Manage student admissions, classes, and guardians.</p>
  </div>
  <div style="background: #28a745; color:white; padding:20px; display:inline-block; border-radius:10px; margin:10px;">
    <h3>Attendance</h3>
    <p>Mark, view, and manage attendance records.</p>
  </div>
  <div style="background: #ffc107; color:white; padding:20px; display:inline-block; border-radius:10px; margin:10px;">
    <h3>Reports</h3>
    <p>Generate performance and attendance reports.</p>
  </div>
</div>

✅ Step 3: Restart and Test

Run in your terminal:

node app.js

Then log in again at:

👉 http://localhost:3000/auth/login

🎨 You’ll now have a beautiful sidebar navigation dashboard that stays fixed on the left, with your homepage and quick-access links on the right.

Would you like me to make the sidebar dynamic per user role next (for example, teachers only see Students and Attendance)?

Excellent direction 👏 — let’s make it sleek, modern, and professional — no emojis, clean typography, subtle gradients, and smooth hover effects. Think of it like a modern Figma-style dashboard prototype.

We’ll redesign your sidebar and dashboard view to look like a real app a design agency might hand over.

🧱 Step 1: Replace your views/layout.ejs

Use this Figma-inspired, modern UI layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title || 'School Management System' %></title>
  <link rel="stylesheet" href="/css/style.css">
  <style>
    :root {
      --primary: #1a73e8;
      --sidebar-bg: #0f172a;
      --sidebar-hover: #1e293b;
      --text-light: #f1f5f9;
      --card-bg: #ffffff;
      --body-bg: #f8fafc;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', Arial, sans-serif;
    }

    body {
      display: flex;
      background-color: var(--body-bg);
      height: 100vh;
      overflow: hidden;
      color: #1e293b;
    }

    /* Sidebar */
    .sidebar {
      width: 240px;
      background: var(--sidebar-bg);
      color: var(--text-light);
      display: flex;
      flex-direction: column;
      padding: 25px 20px;
    }

    .logo {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 40px;
      letter-spacing: 0.5px;
    }

    .nav-item {
      color: var(--text-light);
      text-decoration: none;
      padding: 12px 15px;
      border-radius: 8px;
      margin-bottom: 10px;
      font-size: 15px;
      transition: background 0.3s, color 0.3s;
      display: flex;
      align-items: center;
    }

    .nav-item:hover, .nav-item.active {
      background: var(--sidebar-hover);
      color: #fff;
    }

    /* Main Content */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: auto;
    }

    .header {
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      padding: 15px 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header h2 {
      font-size: 18px;
      color: var(--sidebar-bg);
    }

    .user-info {
      font-size: 14px;
      color: #64748b;
    }

    .content {
      padding: 40px;
      background-color: var(--body-bg);
      flex: 1;
    }

    .footer {
      text-align: center;
      padding: 15px;
      font-size: 13px;
      color: #94a3b8;
      border-top: 1px solid #e2e8f0;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="logo">School Admin Panel</div>
    <a href="/dashboard" class="nav-item">Dashboard</a>
    <a href="/students" class="nav-item">Students</a>
    <a href="/teachers" class="nav-item">Teachers</a>
    <a href="/attendance" class="nav-item">Attendance</a>
    <a href="/fees" class="nav-item">Fees</a>
    <a href="/reports" class="nav-item">Reports</a>
    <a href="/auth/logout" class="nav-item">Logout</a>
  </div>

  <div class="main">
    <div class="header">
      <h2><%= title || 'Dashboard' %></h2>
      <div class="user-info">User: <%= user ? user.username : '' %> | Role: <%= user ? user.role : '' %></div>
    </div>

    <div class="content">
      <% include(content) %>
    </div>

    <div class="footer">© <%= new Date().getFullYear() %> Offline School System. All rights reserved.</div>
  </div>
</body>
</html>

🧱 Step 2: Update dashboard_content.ejs

This version matches the new flat Figma-like look:

<div style="display:flex; flex-wrap:wrap; gap:20px;">

  <div style="flex:1; min-width:240px; background:white; padding:25px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.05); transition:transform .3s;">
    <h3 style="margin-bottom:10px; color:#1a73e8;">Students</h3>
    <p>Manage enrolments, edit profiles, and assign guardians.</p>
  </div>

  <div style="flex:1; min-width:240px; background:white; padding:25px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.05); transition:transform .3s;">
    <h3 style="margin-bottom:10px; color:#1a73e8;">Attendance</h3>
    <p>Track daily student attendance efficiently.</p>
  </div>

  <div style="flex:1; min-width:240px; background:white; padding:25px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.05); transition:transform .3s;">
    <h3 style="margin-bottom:10px; color:#1a73e8;">Fees</h3>
    <p>View, record, and manage all student payments.</p>
  </div>

  <div style="flex:1; min-width:240px; background:white; padding:25px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.05); transition:transform .3s;">
    <h3 style="margin-bottom:10px; color:#1a73e8;">Reports</h3>
    <p>Generate professional reports and analytics locally.</p>
  </div>

</div>

▶️ Step 3: Restart and View

Restart your project:

node app.js

Then open:

👉 http://localhost:3000/dashboard

You’ll now see a futuristic dashboard layout — clean sidebar, modern typography, consistent color palette, and a well-structured content area.

Would you like me to make the sidebar dynamic by user role (so teachers and accountants only see their relevant sections) next?

Excellent! You’re describing what modern web apps call a persistent layout, where the sidebar stays fixed on the left and the right side of the screen updates dynamically without reloading the entire page.

There are two ways to achieve this:

⚙️ Option 1: Simple Version (Fast to implement — partial page reloads)

This version keeps your sidebar fixed (we already have that) and simply reloads only the right side content. It feels like a single-page app but still runs fully offline and server-rendered.

Here’s how to do it:

🧩 Step 1: Slightly update your layout.ejs

Add an ID to the main content wrapper so we can target it:

<div class="content" id="main-content">
  <% include(content) %>
</div>

Then add this script right before the closing </body> tag:

<script>
  document.querySelectorAll('.nav-item').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const url = e.target.getAttribute('href');

      fetch(url)
        .then(res => res.text())
        .then(html => {
          // Create a fake DOM from the response
          const temp = document.createElement('div');
          temp.innerHTML = html;
          const newContent = temp.querySelector('#main-content')?.innerHTML || html;
          document.getElementById('main-content').innerHTML = newContent;
          history.pushState({}, '', url);
        })
        .catch(err => console.error('Navigation error:', err));
    });
  });
</script>

✅ What this does:

• Keeps the sidebar fixed.
• Loads new page content into the right side (#main-content) dynamically.
• Works completely offline.

🧩 Step 2: Make sure all pages include layout.ejs

All your EJS pages (students, teachers, attendance, etc.) should start with:

<%- include('layout', { content: 'students_content', title: 'Students' }) %>

and have matching content files (e.g. students_content.ejs).

This ensures that when you navigate via the sidebar, only the content section (#main-content) updates — not the entire layout.

⚙️ Option 2: More Advanced (AJAX + API + Frontend JS framework)

You could also turn this into a mini single-page app using AJAX routes or frameworks like Vue.js or React, but the first option above keeps things lightweight and fully offline, just as you’ve built it.

Once you apply Step 1 and Step 2:

• Open your app.
• Click Students, Teachers, Attendance, etc.

✅ The left sidebar will stay in place, and the right side will update instantly — a modern dashboard experience just like enterprise apps.

Would you like me to make the sidebar also highlight the active page (so the current tab glows or is greyed)?

Perfect 👏 — let’s give your home page (landing page) a professional redesign too! Right now, it’s just text and links. We’ll make it look like a polished “Welcome Portal” — a simple entry screen that fits the look of your futuristic dashboard.

It will have:

• A full-width centered card
• A nice gradient background
• A bold title
• Modern interface buttons for Login, Students, and Teachers

🧱 Step 1: Create a new file: views/home.ejs

Paste this code inside:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    body {
      margin: 0;
      font-family: 'Inter', Arial, sans-serif;
      background: linear-gradient(135deg, #1a73e8, #0f172a);
      display: flex;
      height: 100vh;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .container {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      padding: 60px 80px;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 20px;
    }

    p {
      font-size: 1rem;
      color: #dbeafe;
      margin-bottom: 30px;
    }

    a.button {
      display: inline-block;
      background: #ffffff;
      color: #0f172a;
      text-decoration: none;
      font-weight: 600;
      padding: 12px 30px;
      border-radius: 30px;
      margin: 10px;
      transition: all 0.3s ease;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }

    a.button:hover {
      background: #1a73e8;
      color: #fff;
      transform: translateY(-2px);
    }

    footer {
      margin-top: 40px;
      font-size: 0.8rem;
      color: #a3bffa;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to your Offline School Management System</h1>
    <p>Manage students, teachers, and attendance completely offline with modern simplicity.</p>

    <div>
      <a href="/auth/login" class="button">Login</a>
      <a href="/students" class="button">Students</a>
      <a href="/teachers" class="button">Teachers</a>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the future</footer>
  </div>
</body>
</html>

🧱 Step 2: Update your home route in app.js

Replace your existing home page route:

app.get('/', (req, res) => {
  res.send('<h1>Welcome to your Offline School Management System 🚀</h1><p><a href="/auth/login">Login</a> | <a href="/students">Students</a> | <a href="/teachers">Teachers</a></p>');
});

with this line instead:

app.get('/', (req, res) => {
  res.render('home');
});

▶️ Step 3: Restart and test

Run:

node app.js

Then open:

👉 http://localhost:3000

✅ You’ll now see a beautiful futuristic landing page, centered with a blur-glass card, smooth hover animations, and strong typography.

Would you like me to make it automatically redirect users to their dashboard if they’re already logged in (skip the homepage for logged-in users)?

Perfect choice 👏 — adding a school image background will make your landing page look like a real product homepage while keeping that sleek, futuristic glass-card aesthetic.

We'll use your local asset so it still runs fully offline.

🧱 Step 1: Add an image to your project

1. Save a nice, high-quality school image (e.g., school-bg.jpg).
2. Place it inside your project under:

3. public/images/school-bg.jpg

You can rename it to whatever you’d like, but we’ll use this name for now.

🧱 Step 2: Update your home.ejs

Replace your current body section’s CSS with this updated version:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    body {
      margin: 0;
      font-family: 'Inter', Arial, sans-serif;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('/images/school-bg.jpg') no-repeat center center fixed;
      background-size: cover;
      overflow: hidden;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 0;
    }

    .container {
      position: relative;
      z-index: 1;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(15px);
      padding: 60px 80px;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      max-width: 600px;
      color: white;
    }

    h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: #fff;
    }

    p {
      font-size: 1rem;
      color: #e0e7ff;
      margin-bottom: 30px;
    }

    a.button {
      display: inline-block;
      background: #ffffff;
      color: #0f172a;
      text-decoration: none;
      font-weight: 600;
      padding: 12px 30px;
      border-radius: 30px;
      margin: 10px;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    a.button:hover {
      background: #1a73e8;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(26, 115, 232, 0.4);
    }

    footer {
      margin-top: 40px;
      font-size: 0.8rem;
      color: #cbd5e1;
    }
  </style>
</head>
<body>

  <div class="overlay"></div>

  <div class="container">
    <h1>Welcome to your Offline School Management System</h1>
    <p>Manage everything offline — students, teachers, attendance, and reporting, crafted for modern computer labs.</p>

    <div>
      <a href="/auth/login" class="button">Login</a>
      <a href="/students" class="button">Students</a>
      <a href="/teachers" class="button">Teachers</a>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Built for the Future</footer>
  </div>
</body>
</html>

🧠 What’s New

• Full image background: fills the whole page (offline from /public/images/school-bg.jpg).
• Semi-transparent glass overlay: improves text visibility.
• Blurred, centered container: gives that futuristic UI feel like in Figma prototypes.

▶️ Step 3: Restart and View

Run:

node app.js

Then visit:

👉 http://localhost:3000

✅ You’ll now see your school photo background with the glassy welcome card floating beautifully at the center — modern, professional, and visually stunning.

Would you like me to help you design the login page next to match this new futuristic theme?

Perfect 👌 — we’ll use your exact image path:

school-system\\public\\images\\background-photo.jpg

so it still loads safely offline.

Here’s your updated version of the home.ejs file that uses your background image and keeps that futuristic glass‑card style:

🧱 Final views/home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    body {
      margin: 0;
      font-family: 'Inter', Arial, sans-serif;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('/images/background-photo.jpg') no-repeat center center fixed;
      background-size: cover;
      overflow: hidden;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 0;
    }

    .container {
      position: relative;
      z-index: 1;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(15px);
      padding: 60px 80px;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      max-width: 600px;
      color: white;
    }

    h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: #fff;
    }

    p {
      font-size: 1rem;
      color: #e0e7ff;
      margin-bottom: 30px;
    }

    a.button {
      display: inline-block;
      background: #ffffff;
      color: #0f172a;
      text-decoration: none;
      font-weight: 600;
      padding: 12px 30px;
      border-radius: 30px;
      margin: 10px;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    a.button:hover {
      background: #1a73e8;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(26, 115, 232, 0.4);
    }

    footer {
      margin-top: 40px;
      font-size: 0.8rem;
      color: #cbd5e1;
    }
  </style>
</head>
<body>

  <div class="overlay"></div>

  <div class="container">
    <h1>Welcome to your Offline School Management System</h1>
    <p>Manage everything offline — students, teachers, attendance, and reporting, crafted for modern computer labs.</p>

    <div>
      <a href="/auth/login" class="button">Login</a>
      <a href="/students" class="button">Students</a>
      <a href="/teachers" class="button">Teachers</a>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Built for the Future</footer>
  </div>
</body>
</html>

✅ Checkpoints

1. Make sure your image is saved at:

2. school-system/public/images/background-photo.jpg

3. Restart your app:

4. node app.js

5. Open: http://localhost:3000

You’ll see your school image as a full‑page background, with your futuristic translucent welcome card centered perfectly.

Would you like me to now redesign your login page in the same glassy futuristic style next?

That’s a solid start — the layout is already close to something you’d see on a professional portal. 🎨 The image shows a good foundation: blurred background, centered content, rounded glass panel, and well-aligned buttons.

Here’s what can be improved to make it look like it was designed in Figma by a UI designer:

💡 Design polish ideas

1. Sharper glassmorphism effect

Right now, the blur and opacity are faint. We want a slightly lighter glass with better contrast.

.container {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(25px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #fff;
}

2. Typography hierarchy (Font Weight + Contrast)

Use larger headers and tighter line height for a digital poster-like presence.

h1 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  color: #e8ecf2;
}

3. Modern button styling (shadow + subtle color hover)

a.button {
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background 0.3s ease;
}

a.button:hover {
  background: #2563eb;
  color: #fff;
  transform: translateY(-3px);
}

4. Balanced card spacing

The card could be slightly smaller vertically and centered more evenly:

.container {
  max-width: 520px;
  padding: 50px 60px;
  border-radius: 20px;
}

5. Low-profile gradient layer

Add a subtle gradient overlay to make the photo more cinematic.

.overlay {
  background: radial-gradient(circle at top left, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
}

6. Color filter for the background image

To keep the card readable no matter the photo, add a dark tint:

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('/images/background-photo.jpg') center/cover no-repeat;
  z-index: -1;
}

That also helps different monitors display consistent contrast.

7. Optional accent glow

If you want a very modern ‘Figma prototype’ glow:

.container {
  box-shadow: 0 0 60px rgba(37, 99, 235, 0.25);
}

✨ Result

These enhancements make it look:

• Minimal, elegant, and cool-toned (like modern SaaS dashboards)
• Readable on all screens
• Confidence-inspiring, not playful

Would you like me to give you the full updated home.ejs file with all these design improvements applied (ready to paste and run)?

Here’s your fully polished futuristic home.ejs — refined with glassmorphism, balanced shadows, gradient tint, and cinematic depth. Just replace your current home.ejs with this code 👇

✅ Final views/home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    :root {
      --primary: #2563eb;
      --light: rgba(255, 255, 255, 0.85);
      --dark-overlay: rgba(0, 0, 0, 0.6);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', Arial, sans-serif;
    }

    body {
      position: relative;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #f8fafc;
      overflow: hidden;
    }

    /* Subtle gradient on top of background image */
    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)),
        url('/images/background-photo.jpg') center/cover no-repeat;
      z-index: -1;
      filter: brightness(0.9) contrast(1.05);
    }

    .container {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(25px) saturate(1.2);
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
      border-radius: 20px;
      max-width: 550px;
      width: 90%;
      text-align: center;
      padding: 60px 70px;
      color: #ffffff;
    }

    h1 {
      font-size: 2.4rem;
      font-weight: 800;
      letter-spacing: 0.4px;
      margin-bottom: 15px;
    }

    p {
      font-size: 1rem;
      line-height: 1.6;
      color: #e2e8f0;
      margin-bottom: 35px;
    }

    .button-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    a.button {
      display: inline-block;
      text-decoration: none;
      background: var(--light);
      color: #1e293b;
      font-weight: 600;
      padding: 12px 35px;
      border-radius: 40px;
      letter-spacing: 0.4px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;
    }

    a.button:hover {
      background: var(--primary);
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
    }

    footer {
      margin-top: 50px;
      font-size: 0.85rem;
      color: #cbd5e1;
      letter-spacing: 0.3px;
    }

    @media (max-width: 600px) {
      .container {
        padding: 40px 30px;
        border-radius: 16px;
      }
      h1 { font-size: 1.8rem; }
      .button-container { gap: 15px; }
      a.button { padding: 10px 25px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to your Offline School Management System</h1>
    <p>Manage students, teachers, attendance, and reports — all locally. Built for modern, connected learning environments without internet dependency.</p>

    <div class="button-container">
      <a href="/auth/login" class="button">Login</a>
      <a href="/students" class="button">Students</a>
      <a href="/teachers" class="button">Teachers</a>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the Future</footer>
  </div>
</body>
</html>

✅ Steps to confirm

1. Make sure your image exists at:

2. school-system/public/images/background-photo.jpg

3. Restart your app:

4. node app.js

5. Go to:
6. 👉 http://localhost:3000

✨ The result

• Subtle dark gradient overlay gives better text contrast.
• Crisp glass effect with high-quality blur.
• Smooth glowing hover transitions on buttons.
• Fully available offline.

Would you like me to now restyle your login page to match this same professional Figma-style layout next?

Perfect — you want a split‑screen design, where the background image fills one side (right), and the glass‑card content is aligned to the left. This is a very polished, modern landing layout — exactly what tools like Figma or Framer would create.

Here’s your updated views/home.ejs file 👇

✅ Split‑Screen UI (Card left, Image right)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    :root {
      --primary: #2563eb;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', Arial, sans-serif;
    }

    body {
      height: 100vh;
      display: flex;
      background-color: #f8fafc;
      color: #1e293b;
      overflow: hidden;
    }

    /* Left content (glass card) */
    .left-section {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #1e3a8a, #2563eb);
      padding: 60px;
    }

    .card {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      max-width: 420px;
      width: 100%;
      backdrop-filter: blur(20px);
      border-radius: 20px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
      padding: 60px 50px;
      text-align: left;
      border: 1px solid rgba(255,255,255,0.25);
    }

    .card h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .card p {
      color: #e2e8f0;
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 25px;
    }

    .buttons {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    a.button {
      text-decoration: none;
      background: #ffffff;
      color: #1e3a8a;
      font-weight: 600;
      padding: 12px 30px;
      border-radius: 25px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    a.button:hover {
      background: var(--primary);
      color: white;
      transform: translateY(-2px);
    }

    footer {
      margin-top: 40px;
      font-size: 0.85rem;
      color: #cbd5e1;
    }

    /* Right background section */
    .right-section {
      flex: 1;
      background: url('/images/background-photo.jpg') center/cover no-repeat;
      position: relative;
    }

    .right-section::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.3);
    }

    @media (max-width: 900px) {
      body {
        flex-direction: column-reverse;
      }
      .left-section, .right-section {
        flex: unset;
        width: 100%;
        height: 50vh;
      }
      .card {
        text-align: center;
        padding: 40px 30px;
      }
    }
  </style>
</head>
<body>
  <div class="left-section">
    <div class="card">
      <h1>Welcome to your Offline School Management System</h1>
      <p>Manage students, teachers, attendance, and reports — all offline with a sleek futuristic interface.</p>

      <div class="buttons">
        <a href="/auth/login" class="button">Login</a>
        <a href="/students" class="button">Students</a>
        <a href="/teachers" class="button">Teachers</a>
      </div>

      <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the Future</footer>
    </div>
  </div>

  <div class="right-section"></div>
</body>
</html>

✅ What this gives you

• A split layout: sleek glassy card on the left, your school photo on the right.
• Non‑cartoony professional aesthetic — modern fonts, clean lines.
• Subtle shading and blurred edges for a Figma‑like glow.
• Fully responsive: on tablets or small screens, the image and card stack vertically.

▶️ Step 2: Run it

Make sure your image exists at:

school-system/public/images/background-photo.jpg

Then run:

node app.js

Visit:

👉 http://localhost:3000

You’ll now have a professional split layout landing page.

Would you like me to now make that gradient overlay and card animation load smoothly (fade-in/slide effect) to complete the design polish?

Got it 👍 — let’s flip the layout so the image is on the left and the glass card is on the right, maintaining that same futuristic, professional look.

Here’s your new and complete home.ejs code:

✅ Final views/home.ejs (Image Left, Card Right)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    :root {
      --primary: #2563eb;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', Arial, sans-serif;
    }

    body {
      height: 100vh;
      display: flex;
      background-color: #f8fafc;
      color: #1e293b;
      overflow: hidden;
    }

    /* LEFT SIDE BACKGROUND IMAGE */
    .left-section {
      flex: 1;
      background: url('/images/background-photo.jpg') center/cover no-repeat;
      position: relative;
    }

    .left-section::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.35);
    }

    /* RIGHT SIDE GLASS CARD */
    .right-section {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #1e3a8a, #2563eb);
      padding: 60px;
    }

    .card {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      max-width: 420px;
      width: 100%;
      backdrop-filter: blur(20px);
      border-radius: 20px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
      padding: 60px 50px;
      text-align: left;
      border: 1px solid rgba(255,255,255,0.25);
    }

    .card h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: #fff;
    }

    .card p {
      color: #e2e8f0;
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 25px;
    }

    .buttons {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    a.button {
      text-decoration: none;
      background: #ffffff;
      color: #1e3a8a;
      font-weight: 600;
      padding: 12px 30px;
      border-radius: 25px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    a.button:hover {
      background: var(--primary);
      color: #fff;
      transform: translateY(-2px);
    }

    footer {
      margin-top: 40px;
      font-size: 0.85rem;
      color: #cbd5e1;
    }

    /* Responsive Fix */
    @media (max-width: 900px) {
      body {
        flex-direction: column;
      }
      .left-section, .right-section {
        flex: unset;
        width: 100%;
        height: 50vh;
      }
      .card {
        text-align: center;
        padding: 40px 30px;
      }
    }
  </style>
</head>
<body>
  <div class="left-section"></div>

  <div class="right-section">
    <div class="card">
      <h1>Welcome to your Offline School Management System</h1>
      <p>Manage students, teachers, attendance, and reports — all offline, built for speed and security.</p>

      <div class="buttons">
        <a href="/auth/login" class="button">Login</a>
        <a href="/students" class="button">Students</a>
        <a href="/teachers" class="button">Teachers</a>
      </div>

      <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the Future</footer>
    </div>
  </div>
</body>
</html>

✅ What this gives you

• Full image background on the left, covering half the screen.
• A sleek glassmorphic card on the right for the login/entry panel.
• Perfect Figma‑style symmetry.
• Automatically stacks into a top‑bottom layout on mobile.

▶️ Step 2: Restart and test

Make sure your image is at:

school-system/public/images/background-photo.jpg

Then run:

node app.js

Visit:

👉 http://localhost:3000

You’ll now see your image on the left half and your glassy welcome card on the right half.

Would you like me to add a fade-in/slide animation for when the card and image load (like a Figma prototype animation)?

Perfect — this is a clear example of a split authentication layout that looks highly professional:

• Background image on the left with a call‑to‑action section (“CREATE ACCOUNT”).
• A clean white form panel on the right.

We’ll adapt your home page to match that sleek Figma‑like example.

✅ Final views/home.ejs — Modern Split‑Screen Design

This version keeps the image left (blur + overlay) and positions a clean card on the right, shaped and padded like in your provided layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    :root {
      --primary: #2563eb;
      --text-color: #1e293b;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', Arial, sans-serif;
    }

    body {
      height: 100vh;
      display: flex;
      overflow: hidden;
      background: #f1f5f9;
    }

    /* Left Image Side */
    .left-panel {
      flex: 1;
      background: url('/images/background-photo.jpg') center/cover no-repeat;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset -80px 0 80px rgba(0, 0, 0, 0.3);
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.45);
    }

    .cta {
      position: relative;
      z-index: 1;
      text-align: left;
      color: #fff;
      padding: 80px;
      max-width: 500px;
    }

    .cta small {
      display: block;
      letter-spacing: 2px;
      font-size: 0.7rem;
      color: #cbd5e1;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .cta h1 {
      font-size: 2.4rem;
      font-weight: 800;
      margin-bottom: 15px;
    }

    .cta p {
      line-height: 1.6;
      color: #e2e8f0;
      margin-bottom: 20px;
    }

    .cta a.btn-primary {
      background: var(--primary);
      color: #fff;
      padding: 10px 28px;
      border-radius: 5px;
      text-decoration: none;
      font-weight: 600;
      transition: background 0.3s ease;
      display: inline-block;
    }

    .cta a.btn-primary:hover {
      background: #1d4ed8;
    }

    /* Right Login Card */
    .right-panel {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      padding: 60px;
    }

    .card {
      width: 100%;
      max-width: 380px;
      background: #fff;
    }

    .card h2 {
      font-size: 1.8rem;
      margin-bottom: 20px;
      color: var(--text-color);
    }

    .card p {
      font-size: 0.95rem;
      color: #64748b;
      margin-bottom: 30px;
    }

    .card .button-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    a.action-btn {
      text-align: center;
      text-decoration: none;
      background: var(--primary);
      color: white;
      padding: 12px;
      border-radius: 6px;
      font-weight: 600;
      transition: background 0.3s ease;
    }
    a.action-btn:hover {
      background: #1d4ed8;
    }

    a.alt-btn {
      text-align: center;
      text-decoration: none;
      background: #f3f4f6;
      color: var(--text-color);
      padding: 12px;
      border-radius: 6px;
      font-weight: 600;
      transition: background 0.3s ease;
    }
    a.alt-btn:hover {
      background: #e2e8f0;
    }

    footer {
      margin-top: 40px;
      color: #94a3b8;
      font-size: 0.8rem;
      text-align: center;
    }

    @media (max-width: 900px) {
      body {
        flex-direction: column;
      }
      .left-panel, .right-panel {
        flex: unset;
        width: 100%;
        height: 50vh;
      }
      .cta {
        text-align: center;
        padding: 40px;
      }
    }
  </style>
</head>

<body>
  <div class="left-panel">
    <div class="overlay"></div>
    <div class="cta">
      <small>Welcome</small>
      <h1>Manage Your School Offline</h1>
      <p>Experience a cloud‑like dashboard fully offline — manage attendance, payments, and records effortlessly.</p>
      <a href="/auth/login" class="btn-primary">Get Started</a>
    </div>
  </div>

  <div class="right-panel">
    <div class="card">
      <h2>Quick Access</h2>
      <p>Select your destination below to continue.</p>

      <div class="button-group">
        <a href="/auth/login" class="action-btn">Login</a>
        <a href="/students" class="alt-btn">Go to Students</a>
        <a href="/teachers" class="alt-btn">Go to Teachers</a>
      </div>

      <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the Future</footer>
    </div>
  </div>
</body>
</html>

✅ After saving

1. Make sure your background image is still located at:

2. school-system/public/images/background-photo.jpg

3. Restart your server:

4. node app.js

5. Open http://localhost:3000

✨ Result

• Your design will exactly match the provided sample: left image panel with overlay and CTA, right clean white minimal card.
• Look and feel: Figma‑level professional split screen (balanced, calm, corporate‑grade design).

Would you like me to add a smooth fade‑in + image slide animation to complete that premium feel next?

Excellent idea 👏 let’s balance this layout — the image on the left will take up about 65–70% of the width, while the card on the right will be smaller (about 30–35%) and centered vertically like your reference.

Here’s your enhanced and well‑balanced split‑screen design.

✅ Updated views/home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    :root {
      --primary: #2563eb;
      --text-color: #1e293b;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', Arial, sans-serif;
    }

    body {
      height: 100vh;
      display: flex;
      overflow: hidden;
      background: #f1f5f9;
      color: var(--text-color);
    }

    /* ----- LEFT IMAGE PANEL (Big) ----- */
    .left-panel {
      flex: 7;
      position: relative;
      background: url('/images/background-photo.jpg') center/cover no-repeat;
      box-shadow: inset -100px 0 120px rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.45);
    }

    .cta {
      position: relative;
      z-index: 1;
      max-width: 500px;
      color: #fff;
      padding: 100px 70px;
    }

    .cta h1 {
      font-size: 2.6rem;
      font-weight: 800;
      margin-bottom: 15px;
    }

    .cta p {
      color: #e2e8f0;
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 25px;
    }

    .cta a.btn-primary {
      background: var(--primary);
      color: #fff;
      text-decoration: none;
      padding: 12px 34px;
      border-radius: 6px;
      font-weight: 600;
      transition: background 0.3s ease;
    }

    .cta a.btn-primary:hover {
      background: #1d4ed8;
    }

    /* ----- RIGHT PANEL (Small Card) ----- */
    .right-panel {
      flex: 3;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 40px;
      box-shadow: -5px 0 20px rgba(0,0,0,0.08);
    }

    .card {
      width: 100%;
      max-width: 360px;
      text-align: left;
    }

    .card h2 {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: 20px;
    }

    .card p {
      font-size: 0.95rem;
      color: #64748b;
      margin-bottom: 25px;
    }

    .card .buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    a.action-btn {
      display: block;
      text-decoration: none;
      background: var(--primary);
      color: #fff;
      text-align: center;
      padding: 12px;
      border-radius: 6px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    a.action-btn:hover {
      background: #1d4ed8;
      transform: translateY(-2px);
    }

    a.alt-btn {
      display: block;
      text-decoration: none;
      background: #f3f4f6;
      color: var(--text-color);
      text-align: center;
      padding: 12px;
      border-radius: 6px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    a.alt-btn:hover {
      background: #e2e8f0;
    }

    footer {
      margin-top: 40px;
      color: #94a3b8;
      font-size: 0.8rem;
      text-align: center;
    }

    /* ----- Responsive Adjustments ----- */
    @media (max-width: 992px) {
      body {
        flex-direction: column;
      }
      .left-panel, .right-panel {
        flex: unset;
        width: 100%;
        height: 50vh;
      }
      .cta {
        text-align: center;
        padding: 40px;
      }
      .card {
        text-align: center;
      }
    }
  </style>
</head>

<body>
  <!-- Left side image section -->
  <div class="left-panel">
    <div class="overlay"></div>
    <div class="cta">
      <h1>Manage Your School Offline</h1>
      <p>Experience an elegant offline dashboard to manage student data, teachers, attendance, and reports — built for efficiency without internet dependency.</p>
      <a href="/auth/login" class="btn-primary">Get Started</a>
    </div>
  </div>

  <!-- Right side card section -->
  <div class="right-panel">
    <div class="card">
      <h2>Quick Access</h2>
      <p>Select your destination to begin working within your local system.</p>

      <div class="buttons">
        <a href="/auth/login" class="action-btn">Login</a>
        <a href="/students" class="alt-btn">Go to Students</a>
        <a href="/teachers" class="alt-btn">Go to Teachers</a>
      </div>

      <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the Future</footer>
    </div>
  </div>
</body>
</html>

✅ What’s Changed

• Left background now takes about 70% of the screen width.
• Right card area is smaller and minimalist like your reference.
• Text and shapes are clean, evenly balanced, and readable.
• Fully responsive: stacks into clean vertical sections on mobile.

▶️ Step 2: Run the app

Make sure your image path is correct:

school-system/public/images/background-photo.jpg

Then run:

node app.js

Open: http://localhost:3000

You’ll now see the exact composition like your reference image — background on the left, compact modern card on the right.

Would you like me to add smooth slide/fade animation next (so that left image fades in and the right card slides from the side)?

Got it 🎯 — you want the landing page to have that neon-modern gradient glassmorphism effect. The left side says “Welcome!” with a short intro, and the right side is a blurred login form in a translucent box — exactly like your reference image.

Here’s a full views/home.ejs you can drop in right now. It perfectly matches that look and color theme (Figma‑style purples and gradient orange/pink button).

✅ Modern Gradient Glassmorphic Layout (Exactly Like Your Image)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    :root {
      --bg-dark: #1a033a;
      --bg-accent: #2e0b57;
      --glass-bg: rgba(255, 255, 255, 0.08);
      --primary-gradient: linear-gradient(90deg, #ff3c5f, #ff833c);
      --text-light: #f8fafc;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      height: 100vh;
      width: 100vw;
      background: radial-gradient(circle at top left, var(--bg-accent), var(--bg-dark));
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--text-light);
      overflow: hidden;
      position: relative;
    }

    /* Simple abstract shapes */
    body::before, body::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      z-index: 0;
    }
    body::before {
      width: 600px; height: 600px;
      top: -200px; left: -200px;
    }
    body::after {
      width: 400px; height: 400px;
      bottom: -150px; right: -150px;
    }

    .left {
      flex: 1;
      padding-left: 6vw;
      z-index: 1;
    }

    .left h1 {
      font-size: 4rem;
      font-weight: 800;
      margin-bottom: 15px;
      line-height: 0.9;
    }

    .left p {
      font-size: 1rem;
      color: #d1d5db;
      max-width: 400px;
      margin-bottom: 30px;
    }

    .learn-btn {
      background: var(--primary-gradient);
      padding: 12px 26px;
      border: none;
      border-radius: 50px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      transition: 0.3s;
      text-decoration: none;
    }

    .learn-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(255, 60, 95, 0.4);
    }

    .right {
      flex: 0.7;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-right: 6vw;
      z-index: 1;
    }

    .login-box {
      background: var(--glass-bg);
      backdrop-filter: blur(25px) saturate(1.2);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 50px 40px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      width: 100%;
      max-width: 350px;
    }

    .login-box h2 {
      text-align: center;
      margin-bottom: 30px;
      font-size: 1.8rem;
      font-weight: 600;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 25px;
    }

    .input-group input {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.15);
      padding: 12px;
      border-radius: 8px;
      color: white;
      font-size: 0.95rem;
      outline: none;
    }

    .input-group input:focus {
      border-color: #ff3c5f;
    }

    .submit-btn {
      background: var(--primary-gradient);
      border: none;
      width: 100%;
      padding: 12px;
      border-radius: 8px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.3s ease;
    }

    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 60, 95, 0.35);
    }

    .socials {
      margin-top: 25px;
      text-align: center;
    }

    .socials a {
      margin: 0 8px;
      color: #cbd5e1;
      text-decoration: none;
    }

    .socials a:hover {
      color: #fff;
    }

    @media (max-width: 900px) {
      body {
        flex-direction: column;
        justify-content: center;
      }
      .left, .right {
        padding: 30px;
        text-align: center;
      }
      .left h1 { font-size: 2.5rem; }
    }
  </style>
</head>

<body>
  <div class="left">
    <h1>Welcome!</h1>
    <p>Manage your school efficiently with a modern offline desktop‑like experience — data stays safe, secure, and synced locally.</p>
    <a href="/auth/login" class="learn-btn">Learn More</a>
  </div>

  <div class="right">
    <div class="login-box">
      <h2>Sign In</h2>
      <form action="/auth/login" method="post">
        <div class="input-group">
          <input type="text" name="username" placeholder="User Name" required>
          <input type="password" name="password" placeholder="Password" required>
        </div>
        <button class="submit-btn" type="submit">Submit</button>
      </form>
      <div class="socials">
        <a href="#">&#xf09a;</a>
        <a href="#">&#xf16d;</a>
        <a href="#">&#xf0d2;</a>
      </div>
    </div>
  </div>
</body>
</html>

✅ What you’ll get

• Deep purple gradient background with stylish overlay geometry.
• Left intro message “Welcome!” like your example.
• Right translucent Sign‑in card with subtle glow and gradient button.
• Responsive: collapses gracefully on smaller screens.
• Icons are placeholders — you can swap for SVGs or FontAwesome (offline friendly).

Would you like this same style applied to your actual login page design next (so your login page matches this Figma‑grade aesthetic)?

Excellent observation 👌 — in your reference, both the Welcome section and Sign‑in form are contained inside one elegant glass card, divided left and right by a line (same background, unified container).

Let’s replicate that exactly, then modify it to include your custom buttons for Students, Teachers, and Admin instead of a username/password form.

✅ Final views/home.ejs — Unified Glass Card (Welcome + Access Buttons)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline School Management System</title>
<style>
  :root {
    --primary: #ff416c;
    --secondary: #ff4b2b;
    --bg-dark: #1b0034;
    --text-light: #f9fafb;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }

  body {
    height: 100vh;
    background: linear-gradient(135deg, #2e0854, #1b0034);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    overflow: hidden;
  }

  /* Unified main card */
  .main-card {
    width: 90%;
    max-width: 1000px;
    height: 560px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(30px) saturate(1.5);
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
  }

  .welcome-section {
    flex: 1;
    background: url('/images/background-photo.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px;
    box-shadow: inset -100px 0 120px rgba(0,0,0,0.5);
  }

  .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
  }

  .welcome-content {
    position: relative;
    z-index: 2;
  }

  .welcome-content h1 {
    font-size: 3rem;
    font-weight: 800;
  }

  .welcome-content p {
    margin-top: 10px;
    font-size: 1rem;
    color: #e2e8f0;
    max-width: 380px;
    line-height: 1.6;
  }

  .access-section {
    flex: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 0 60px;
    color: #fff;
  }

  .access-section h2 {
    font-size: 2rem;
    margin-bottom: 25px;
  }

  .role-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  a.role-btn {
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 12px rgba(255,75,43,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  a.role-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255,75,43,0.5);
  }

  footer {
    margin-top: 50px;
    font-size: 0.8rem;
    color: #cbd5e1;
  }

  @media(max-width:960px){
    .main-card{
      flex-direction: column;
      height:auto;
    }
    .welcome-section{
      height:300px;
      padding:40px;
      text-align:center;
      box-shadow:none;
    }
    .access-section{
      padding:40px;
      text-align:center;
    }
  }
</style>
</head>
<body>
  <div class="main-card">

    <!-- Left Welcome Section -->
    <div class="welcome-section">
      <div class="overlay"></div>
      <div class="welcome-content">
        <h1>Welcome!</h1>
        <p>Manage your school efficiently – all offline. Keep your data secure and your operations flowing smoothly with a modern, responsive design.</p>
      </div>
    </div>

    <!-- Right Access Section -->
    <div class="access-section">
      <h2>Access Portal</h2>
      <div class="role-buttons">
        <a href="/auth/login" class="role-btn">Admin</a>
        <a href="/students" class="role-btn">Students</a>
        <a href="/teachers" class="role-btn">Teachers</a>
      </div>
      <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the Future</footer>
    </div>
  </div>
</body>
</html>

✨ Result

When you open this page:

• A single unified card fills the center of the screen.
• Left section: background image + “Welcome” intro with soft overlay.
• Right section: glass-block area with labeled role buttons (Admin, Students, Teachers) styled the same way as the orange‑to‑pink gradient button in your reference.
• Balanced proportions (≈65% left image, 35% role panel).
• Mobile‑friendly collapse into vertical stacking.

Would you like me to add a subtle slide‑in animation so the card fades upward on load (like your reference animations in modern Figma mockups)?

Perfect 👌 — you want to preserve the inside glass card layout (like now), but add a second background image that fills the entire page “outside box” — behind everything — while your current inner image stays inside the left section of the card.

We’ll achieve that by layering your second background image directly on the <body> and keeping the card (with the inner image) on top.

Here’s exactly how to do it 👇

✅ Updated views/home.ejs (Outer Background + Inner Card Image)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline School Management System</title>
<style>
  :root {
    --primary: #ff416c;
    --secondary: #ff4b2b;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }

  /* --- Outer full-page background --- */
  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/images/outer-bg.jpg') center/cover no-repeat; /* ✅ Add your outer image */
    overflow: hidden;
  }

  /* dark overlay for outside background */
  body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 0;
  }

  /* --- Main Glass Card --- */
  .main-card {
    width: 90%;
    max-width: 1000px;
    height: 560px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px) saturate(1.3);
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
  }

  /* --- Left inner image section --- */
  .welcome-section {
    flex: 1;
    background: url('/images/background-photo.jpg') center/cover no-repeat; /* ✅ Inner image */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px;
    box-shadow: inset -80px 0 100px rgba(0,0,0,0.6);
  }

  .welcome-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
  }

  .welcome-content {
    position: relative;
    z-index: 2;
    color: #fff;
  }

  .welcome-content h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
  }

  .welcome-content p {
    font-size: 1rem;
    color: #e2e8f0;
    line-height: 1.6;
    max-width: 360px;
  }

  /* --- Right side role panel --- */
  .access-section {
    flex: 0.7;
    background: rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px;
    color: #fff;
  }

  .access-section h2 {
    font-size: 2rem;
    margin-bottom: 25px;
  }

  .role-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  a.role-btn {
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 12px rgba(255,75,43,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  a.role-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255,75,43,0.5);
  }

  footer {
    margin-top: 40px;
    font-size: 0.8rem;
    color: #cbd5e1;
  }

  @media(max-width:960px){
    body{
      flex-direction:column;
      padding:20px;
    }
    .main-card{
      flex-direction:column;
      height:auto;
    }
    .welcome-section,
    .access-section{
      width:100%;
      padding:40px;
      text-align:center;
      box-shadow:none;
    }
    .welcome-content p{max-width:unset;}
  }
</style>
</head>
<body>
  <div class="main-card">
    <!-- Left Image Section Inside Card -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1>Welcome!</h1>
        <p>Manage students, teachers, and admins offline in one smooth dashboard experience.</p>
      </div>
    </div>

    <!-- Right Access Section -->
    <div class="access-section">
      <h2>Access Portal</h2>
      <div class="role-buttons">
        <a href="/auth/login" class="role-btn">Admin</a>
        <a href="/students" class="role-btn">Students</a>
        <a href="/teachers" class="role-btn">Teachers</a>
      </div>
      <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the Future</footer>
    </div>
  </div>
</body>
</html>

✅ How to use it

1. You now have two images:

   • Outer background (fills entire page):

2. school-system/public/images/outer-bg.jpg
   Inner image (left part of card):

3. school-system/public/images/background-photo.jpg

4. Restart your app:

5. node app.js

6. Visit: http://localhost:3000

💎 The result

• Outer photo fills everything outside the main card (dimmed for focus).
• Inside, your left half still shows your original image with overlay.
• Buttons for Admin, Students, and Teachers remain on the right.
• A perfect, double‑layered professional landing page.

Would you like me to now add lighting glow and fade‑in animation so the two image layers and the card load smoothly?

Excellent 👌 let's fix that — the current layout slightly softens or crops your images because of the background overlay and background-size: cover behavior. We’ll make sure both outer and inner images stay high‑resolution, sharp, and fully visible, centered perfectly, without being zoomed or blurred.

We'll use:

• background-size: contain for perfect fit (no cropping)
• image-rendering: crisp-edges for sharper clarity on displays
• A subtle dark overlay above instead of mixing into the image

Here’s the updated views/home.ejs 👇

✅ Enhanced Image Sharpness Version

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline School Management System</title>
<style>
  :root {
    --primary: #ff416c;
    --secondary: #ff4b2b;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }

  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0b0b url('/images/outer-bg.jpg') center center no-repeat;
    background-size: contain; /* shows full image — no cropping */
    image-rendering: crisp-edges; /* maximize sharpness */
    overflow: hidden;
    color: #fff;
    position: relative;
  }

  /* Light transparent mask for depth */
  body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
  }

  .main-card {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1000px;
    height: 560px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Left section: inner image */
  .welcome-section {
    flex: 1;
    background: #030303 url('/images/background-photo.jpg') center center no-repeat;
    background-size: contain; /* keep it fully visible */
    image-rendering: crisp-edges;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px;
  }

  .welcome-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
  }

  .welcome-content {
    z-index: 1;
    max-width: 400px;
  }

  .welcome-content h1 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 10px;
  }

  .welcome-content p {
    font-size: 1rem;
    color: #e2e8f0;
    line-height: 1.6;
  }

  /* Right panel */
  .access-section {
    flex: 0.7;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px;
    color: #fff;
  }

  .access-section h2 {
    font-size: 2rem;
    margin-bottom: 25px;
  }

  .role-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  a.role-btn {
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  a.role-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 65, 108, 0.6);
  }

  footer {
    margin-top: 40px;
    font-size: 0.8rem;
    color: #cbd5e1;
  }

  @media (max-width: 960px) {
    body {
      flex-direction: column;
      background-size: cover; /* ensures mobile fill */
    }
    .main-card {
      flex-direction: column;
      height: auto;
    }
    .welcome-section, .access-section {
      width: 100%;
      padding: 40px;
      text-align: center;
    }
    .welcome-content h1 {
      font-size: 2rem;
    }
  }
</style>
</head>
<body>
  <div class="main-card">
    <!-- Left Section with Inner Image -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1>Welcome!</h1>
        <p>Manage your offline school operations efficiently with an elegant modern interface.</p>
      </div>
    </div>

    <!-- Right Access Buttons -->
    <div class="access-section">
      <h2>Access Portal</h2>
      <div class="role-buttons">
        <a href="/auth/login" class="role-btn">Admin</a>
        <a href="/students" class="role-btn">Students</a>
        <a href="/teachers" class="role-btn">Teachers</a>
      </div>
      <footer>© <%= new Date().getFullYear() %> Offline School System — Designed for the Future</footer>
    </div>
  </div>
</body>
</html>

✅ Steps to finalize:

1. Outer background image (fills the page):

2. school-system/public/images/outer-bg.jpg

3. Inner left section image:

4. school-system/public/images/background-photo.jpg

💎 What’s improved:

• Both images now remain clear and uncropped.
• The left image (inside the card) scales perfectly without hiding details.
• Outer background remains crisp due to contain rendering.
• Maintains professional, Figma‑grade depth and separation.

Would you like me to now add a slight fade-in animation so your outer and inner images load elegantly side by side?

Perfect 👏 let’s make your Admin login page match the same high‑end, futuristic aesthetic as your home page — unified theme, consistent gradient palette, glassmorphic fields, and a glowing submit button.

We’ll replace your old views/login.ejs with this beautiful, professional version.

✅ Final views/login.ejs (Futuristic Gradient Login Page)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Login — Offline School Management</title>
  <style>
    :root {
      --primary: #ff416c;
      --secondary: #ff4b2b;
      --accent: #ff5964;
      --bg-dark: #1a0033;
      --text-light: #f8fafc;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      height: 100vh;
      background: radial-gradient(circle at top left, #2e0854, #1a0033);
      color: var(--text-light);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Login container */
    .login-wrapper {
      width: 90%;
      max-width: 450px;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 50px 40px;
      backdrop-filter: blur(25px) saturate(1.2);
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      text-align: center;
    }

    .login-wrapper h2 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: #ffffff;
    }

    .login-wrapper p {
      color: #d1d5db;
      font-size: 0.95rem;
      margin-bottom: 40px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 30px;
    }

    .input-group input {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 10px;
      padding: 14px 16px;
      color: white;
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.3s ease;
    }

    .input-group input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 8px rgba(255, 73, 99, 0.5);
    }

    .btn {
      width: 100%;
      padding: 14px 20px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border: none;
      border-radius: 10px;
      font-weight: 600;
      color: white;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 65, 108, 0.5);
    }

    .links {
      margin-top: 25px;
      color: #a5b4fc;
      font-size: 0.9rem;
    }

    .links a {
      color: var(--text-light);
      text-decoration: none;
      font-weight: 500;
    }

    .links a:hover {
      text-decoration: underline;
    }

    footer {
      margin-top: 40px;
      font-size: 0.8rem;
      color: #cbd5e1;
    }
  </style>
</head>
<body>
  <div class="login-wrapper">
    <h2>Admin Login</h2>
    <p>Sign in to manage your Offline School System securely.</p>

    <form method="POST" action="/auth/login">
      <div class="input-group">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
      </div>
      <button type="submit" class="btn">Sign In</button>
    </form>

    <div class="links">
      <p><a href="/">← Back to Home</a></p>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Secure Access Portal</footer>
  </div>
</body>
</html>

✅ What this design includes

• Dark gradient glassmorphism background (matches your home page theme).
• Centered glowing login card with translucence and soft depth.
• Input fields styled with glass edges, bright focus halo, and elegant glow.
• Gradient “Sign In” button — glossy and responsive.
• Fully responsive down to mobile screens.

▶️ Step 2: Apply and test

1. Save this file as views/login.ejs.
2. Restart your app:

3. node app.js

4. Visit http://localhost:3000/auth/login

✅ You’ll now have a beautiful, cohesive Admin Sign‑In page consistent with your home portal design.

Would you like me to add a background image (like your home page) behind this login card for even more visual continuity?

That’s awesome 🙌 — since you love the look of the login page, let’s build you a brand‑new landing page that matches its color palette and professional tone.

We’ll keep it elegant, corporate, and futuristic to complement your login design — using the same purple and pink gradients, modern typography, subtle blur, and centered layout.

Here’s your refined and cohesive design 👇

✅ Final views/home.ejs — Unified Theme with Login Page Aesthetic

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline School Management System</title>
  <style>
    :root {
      --primary: #ff416c;
      --secondary: #ff4b2b;
      --bg-dark: #1a0033;
      --bg-accent: #2e0854;
      --text-light: #f8fafc;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      height: 100vh;
      background: radial-gradient(circle at top left, var(--bg-accent), var(--bg-dark));
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--text-light);
      overflow: hidden;
      position: relative;
    }

    /* Decorative blurred shapes */
    body::before, body::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      filter: blur(150px);
      opacity: 0.1;
      z-index: 0;
    }

    body::before {
      width: 700px; height: 700px;
      top: -200px; left: -150px;
      background: var(--secondary);
    }

    body::after {
      width: 500px; height: 500px;
      bottom: -100px; right: -150px;
      background: var(--primary);
    }

    .container {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 700px;
      width: 90%;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(25px) saturate(1.3);
      border-radius: 20px;
      padding: 80px 60px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.08);
    }

    h1 {
      font-size: 2.8rem;
      font-weight: 800;
      letter-spacing: 1px;
      margin-bottom: 20px;
    }

    p {
      font-size: 1rem;
      color: #d1d5db;
      margin-bottom: 40px;
      line-height: 1.6;
    }

    .buttons {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    a.btn {
      text-decoration: none;
      padding: 14px 36px;
      border-radius: 50px;
      color: #fff;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      font-weight: 600;
      letter-spacing: 0.3px;
      transition: all 0.3s ease;
      box-shadow: 0 6px 15px rgba(255,75,43,0.3);
    }

    a.btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(255,75,43,0.5);
    }

    footer {
      margin-top: 60px;
      font-size: 0.85rem;
      color: #a5b4fc;
    }

    @media (max-width: 600px) {
      .container {
        padding: 50px 30px;
      }
      h1 { font-size: 2rem; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Offline School Management System</h1>
    <p>
      Manage your school effortlessly — from admissions to attendance, all without internet.
      Built for speed, reliability, and style in one powerful offline dashboard.
    </p>

    <div class="buttons">
      <a href="/auth/login" class="btn">Admin</a>
      <a href="/students" class="btn">Students</a>
      <a href="/teachers" class="btn">Teachers</a>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Powered by Modern Design</footer>
  </div>
</body>
</html>

🌈 Design Highlights

• Unified gradient background — same palette as your login page.
• Soft blurred shapes give it that high‑end Figma look.
• Centralized translucent card with subtle glow.
• Cohesive buttons with the same color scheme and motion cues.
• Fully responsive — looks premium on all screen sizes.

🔥 The result: when you open http://localhost:3000, you’ll immediately feel the consistency — a seamless bridge from your landing page straight into your login portal.

Would you like me to make the landing page fade up and glow softly when loaded (a quick animation to impress users)?

Perfect 👏 — time to give your Dashboard the same modern energy** as your landing and login pages. We’ll keep the smooth glassmorphism aesthetic, lens-like depth, gradient accents, and responsive sidebar layout.

We’ll unify the design visually so your entire system feels like a single futuristic product.

✅ Final views/layout.ejs — Modern Dashboard Shell

Use this new version to completely replace your old one. It includes:

• Gradient-glass sidebar
• Clean glowing hover effects
• Subtle animations

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title || 'Dashboard' %> — Offline School System</title>
  <style>
    :root {
      --primary: #ff416c;
      --secondary: #ff4b2b;
      --sidebar-bg: rgba(255,255,255,0.08);
      --sidebar-border: rgba(255,255,255,0.12);
      --content-bg: rgba(255,255,255,0.06);
      --text-light: #f8fafc;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      height: 100vh;
      background: radial-gradient(circle at top left, #2e0854, #1a0033);
      display: flex;
      color: var(--text-light);
      overflow: hidden;
    }

    /* Sidebar */
    .sidebar {
      width: 250px;
      min-height: 100vh;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
      backdrop-filter: blur(15px) saturate(1.2);
      display: flex;
      flex-direction: column;
      padding: 40px 20px;
      box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 50px;
      letter-spacing: 0.5px;
    }

    .nav-item {
      text-decoration: none;
      color: #cbd5e1;
      padding: 12px 15px;
      border-radius: 8px;
      margin-bottom: 10px;
      transition: background 0.3s, color 0.3s;
      display: block;
    }

    .nav-item:hover, .nav-item.active {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
      box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3);
    }

    /* Main content */
    .main {
      flex: 1;
      padding: 40px;
      overflow-y: auto;
      background: var(--content-bg);
      backdrop-filter: blur(10px) saturate(1.3);
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      padding-bottom: 20px;
    }

    header h1 {
      font-size: 1.8rem;
      font-weight: 700;
    }

    .role-tag {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      padding: 8px 16px;
      border-radius: 20px;
      font-weight: 500;
      font-size: 0.9rem;
      box-shadow: 0 3px 10px rgba(255, 65, 108, 0.4);
    }

    .content-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 30px;
    }

    .card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 30px;
      text-align: left;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 15px rgba(255, 65, 108, 0.3);
    }

    .card h3 {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 10px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .card p {
      color: #e2e8f0;
      line-height: 1.5;
      font-size: 0.95rem;
    }

    footer {
      margin-top: 40px;
      font-size: 0.8rem;
      text-align: center;
      color: #cbd5e1;
    }

    @media (max-width: 800px) {
      body {
        flex-direction: column;
      }
      .sidebar {
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
        padding: 15px;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      .main {
        padding: 20px;
      }
    }
  </style>
</head>
<body>

  <div class="sidebar">
    <div class="logo">Dashboard</div>
    <a href="/dashboard" class="nav-item">Home</a>
    <a href="/students" class="nav-item">Students</a>
    <a href="/teachers" class="nav-item">Teachers</a>
    <a href="/attendance" class="nav-item">Attendance</a>
    <a href="/fees" class="nav-item">Fees</a>
    <a href="/reports" class="nav-item">Reports</a>
    <a href="/auth/logout" class="nav-item">Logout</a>
  </div>

  <div class="main">
    <header>
      <h1><%= title || 'Welcome, ' + user.username %></h1>
      <span class="role-tag"><%= user ? user.role : '' %></span>
    </header>

    <div class="content-section">
      <% include(content) %>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Professional Edition</footer>
  </div>
</body>
</html>

✅ How it looks

• Gradient glass sidebar that stays visible.
• Smooth blurred background matching your branding.
• Each card panel uses subtle lift‑and‑glow interaction.
• Fully responsive; collapses the sidebar into a top bar on smaller screens.

Would you like me to show you what the dashboard_content.ejs should look like inside this new layout (with polished cards for Students, Teachers, Fees, etc.)?

Very good direction 💪 — let’s refine your dashboard so it looks even cleaner and easier to read:

• The right main content area will be white for contrast and readability.
• The sidebar will stay glassy purple and remain fixed.
• Page content will load dynamically (so only the right side updates when switching menus, while the sidebar remains fixed).

Here’s how you can achieve that 👇

✅ Updated views/layout.ejs — Fixed Sidebar + White Main Content

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title || 'Dashboard' %> — Offline School System</title>
  <style>
    :root {
      --primary: #ff416c;
      --secondary: #ff4b2b;
      --sidebar-bg: rgba(255,255,255,0.08);
      --text-light: #f8fafc;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      height: 100vh;
      display: flex;
      overflow: hidden;
      color: var(--text-light);
      background: radial-gradient(circle at top left, #2e0854, #1a0033);
    }

    /* Sidebar styles */
    .sidebar {
      width: 250px;
      background: rgba(30, 8, 60, 0.9);
      border-right: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(12px);
      color: #fff;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      padding: 40px 20px;
      box-shadow: 4px 0 15px rgba(0,0,0,0.3);
      z-index: 10;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 50px;
    }

    .nav-item {
      text-decoration: none;
      color: #cbd5e1;
      padding: 12px 18px;
      border-radius: 8px;
      margin-bottom: 10px;
      transition: all 0.3s ease;
      display: block;
    }

    .nav-item:hover, .nav-item.active {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
      box-shadow: 0 4px 15px rgba(255, 65, 108, 0.3);
    }

    /* Main section */
    .main {
      flex: 1;
      margin-left: 250px;
      background: #ffffff; /* ✅ White main content */
      color: #1e293b;
      overflow-y: auto;
      padding: 40px;
      position: relative;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      border-bottom: 2px solid #f1f5f9;
      padding-bottom: 10px;
    }

    header h1 {
      font-size: 1.8rem;
      color: #1e293b;
    }

    .role-tag {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
      padding: 6px 16px;
      border-radius: 15px;
      font-size: 0.85rem;
      font-weight: 600;
    }

    .content-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 30px;
    }

    .card {
      background: #fff;
      color: #1e293b;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

    .card h3 {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 8px;
    }

    .card p {
      color: #475569;
      font-size: 0.95rem;
      line-height: 1.4;
    }

    footer {
      text-align: center;
      font-size: 0.85rem;
      color: #94a3b8;
      margin-top: 40px;
    }

    /* Sidebar fixed + smooth fade-between pages */
    #main-content {
      animation: fadeUp 0.4s ease;
    }

    @keyframes fadeUp {
      0% {
        opacity: 0;
        transform: translateY(15px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <!-- Sidebar, stays fixed -->
  <div class="sidebar">
    <div class="logo">School Panel</div>
    <a href="/dashboard" class="nav-item">Home</a>
    <a href="/students" class="nav-item">Students</a>
    <a href="/teachers" class="nav-item">Teachers</a>
    <a href="/attendance" class="nav-item">Attendance</a>
    <a href="/fees" class="nav-item">Fees</a>
    <a href="/reports" class="nav-item">Reports</a>
    <a href="/auth/logout" class="nav-item">Logout</a>
  </div>

  <!-- Right content area -->
  <div class="main" id="main-content">
    <header>
      <h1><%= title || ('Welcome, ' + user.username) %></h1>
      <span class="role-tag"><%= user.role %></span>
    </header>

    <div class="content-section">
      <% include(content) %>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Professional Edition</footer>
  </div>

  <!-- Sidebar-fixed loading pages with fetch() -->
  <script>
    document.querySelectorAll('.nav-item').forEach(link => {
      link.addEventListener('click', async (e) => {
        e.preventDefault();
        const url = e.target.getAttribute('href');
        const response = await fetch(url);
        const html = await response.text();
        const temp = document.createElement('div');
        temp.innerHTML = html;
        const newContent = temp.querySelector('#main-content')?.innerHTML || html;
        document.querySelector('#main-content').innerHTML = newContent;
        history.pushState({}, '', url);
      });
    });
  </script>
</body>
</html>

✅ What’s new

• Clean two-tone layout: Purple sidebar (fixed) and white main section.
• Sidebar stays visible no matter which page you navigate to.
• Content dynamically loads with fade‑in transitions.
• Cards and dashboard area are crisp and readable.
• Fully responsive and high-performance.

Would you like me to show you how your dashboard_content.ejs should look inside this white area (polished cards and layout pieces)?

Perfect 👏 — you want the title section (header) in the white area to visually tie back to your purple theme. We’ll keep the main content white but give the header a beautiful gradient purple background, just like your sidebar, to unify the design.

Here’s the updated section of your views/layout.ejs with this change applied.

✅ Updated views/layout.ejs (Header with Purple Gradient)

Replace the whole file or just update the header-related parts ↓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title || 'Dashboard' %> — Offline School System</title>
  <style>
    :root {
      --primary: #ff416c;
      --secondary: #ff4b2b;
      --sidebar-bg: rgba(30, 8, 60, 0.9);
      --header-bg: linear-gradient(90deg, #2e0854, #1a0033);
      --text-light: #f8fafc;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      height: 100vh;
      display: flex;
      overflow: hidden;
      color: var(--text-light);
      background: radial-gradient(circle at top left, #2e0854, #1a0033);
    }

    /* Sidebar */
    .sidebar {
      width: 250px;
      background: var(--sidebar-bg);
      backdrop-filter: blur(12px);
      border-right: 1px solid rgba(255,255,255,0.1);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0; bottom: 0; left: 0;
      padding: 40px 20px;
      box-shadow: 4px 0 15px rgba(0,0,0,0.3);
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 50px;
    }

    .nav-item {
      text-decoration: none;
      color: #cbd5e1;
      padding: 12px 18px;
      border-radius: 8px;
      margin-bottom: 10px;
      transition: all 0.3s;
      display: block;
    }

    .nav-item:hover, .nav-item.active {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: #fff;
      box-shadow: 0 4px 15px rgba(255, 65, 108, 0.3);
    }

    /* Main Section */
    .main {
      margin-left: 250px;
      flex: 1;
      background: #ffffff;
      color: #1e293b;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* Header now has purple background */
    header {
      background: var(--header-bg);
      padding: 25px 40px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    }

    header h1 {
      font-size: 1.7rem;
      font-weight: 700;
    }

    .role-tag {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: #fff;
      padding: 6px 16px;
      border-radius: 15px;
      font-size: 0.85rem;
      font-weight: 600;
      box-shadow: 0 3px 10px rgba(255, 65, 108, 0.4);
    }

    .content-section {
      flex: 1;
      padding: 40px;
      background: #fff;
      color: #1e293b;
      animation: fadeUp 0.4s ease;
    }

    @keyframes fadeUp {
      0% { opacity: 0; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    footer {
      color: #94a3b8;
      text-align: center;
      font-size: 0.85rem;
      padding: 20px;
      border-top: 1px solid #e2e8f0;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="logo">School Panel</div>
    <a href="/dashboard" class="nav-item">Home</a>
    <a href="/students" class="nav-item">Students</a>
    <a href="/teachers" class="nav-item">Teachers</a>
    <a href="/attendance" class="nav-item">Attendance</a>
    <a href="/fees" class="nav-item">Fees</a>
    <a href="/reports" class="nav-item">Reports</a>
    <a href="/auth/logout" class="nav-item">Logout</a>
  </div>

  <div class="main">
    <header>
      <h1><%= title || ('Welcome, ' + user.username) %></h1>
      <span class="role-tag"><%= user.role %></span>
    </header>

    <div class="content-section" id="main-content">
      <% include(content) %>
    </div>

    <footer>© <%= new Date().getFullYear() %> Offline School System — Professional Edition</footer>
  </div>

  <!-- Dynamic page loading -->
  <script>
    document.querySelectorAll('.nav-item').forEach(link => {
      link.addEventListener('click', async (e) => {
        e.preventDefault();
        const url = e.target.getAttribute('href');
        const res = await fetch(url);
        const html = await res.text();
        const temp = document.createElement('div');
        temp.innerHTML = html;
        const newContent = temp.querySelector('#main-content')?.innerHTML || html;
        document.querySelector('#main-content').innerHTML = newContent;
        history.pushState({}, '', url);
      });
    });
  </script>
</body>
</html>

What’s new

• The header inside the white main area now uses a deep purple gradient background.
• The text (Welcome, Admin) is white, creating contrast.
• The rest of the dashboard area remains white so content and tables are clean.
• The sidebar stays fixed, and your dynamic content loading still works perfectly.

Would you like to make that header gradient animate slightly (a slow moving gradient shimmer effect like a premium SaaS dashboard)?

Excellent 👏 — you want the dashboard header title (the text inside the purple bar) to dynamically show the name of the page/tab you’ve clicked on (e.g., Students, Teachers, Attendance, etc.) instead of just "Welcome Admin" — so it updates instantly as you navigate without reloading the sidebar.

We’ll modify both the sidebar navigation and the JS loader script to achieve this.

✅ Step‑by‑Step: Update your views/layout.ejs

Here’s how to make the header title dynamic.

1️⃣ Find this section in your layout:

<header>
  <h1><%= title || ('Welcome, ' + user.username) %></h1>
  <span class="role-tag"><%= user.role %></span>
</header>

🔄 Replace it with this:

<header>
  <h1 id="page-title"><%= title || 'Dashboard' %></h1>
  <span class="role-tag"><%= user.role %></span>
</header>

This gives the header a fixed ID that we can target and update when new tabs are clicked.

2️⃣ Scroll down to your navigation menu and add a data-title attribute to each navigation link like this:

<a href="/dashboard" class="nav-item" data-title="Dashboard">Home</a>
<a href="/students" class="nav-item" data-title="Students">Students</a>
<a href="/teachers" class="nav-item" data-title="Teachers">Teachers</a>
<a href="/attendance" class="nav-item" data-title="Attendance">Attendance</a>
<a href="/fees" class="nav-item" data-title="Fees">Fees</a>
<a href="/reports" class="nav-item" data-title="Reports">Reports</a>
<a href="/auth/logout" class="nav-item" data-title="Logout">Logout</a>

3️⃣ Then replace your JavaScript (at the bottom) with this updated version:

<script>
  const navLinks = document.querySelectorAll('.nav-item');
  const pageTitle = document.getElementById('page-title');

  navLinks.forEach(link => {
    link.addEventListener('click', async (e) => {
      e.preventDefault();
      const url = link.getAttribute('href');
      const newTitle = link.dataset.title || 'Dashboard';

      // fetch page content
      const res = await fetch(url);
      const html = await res.text();
      const temp = document.createElement('div');
      temp.innerHTML = html;
      const newContent = temp.querySelector('#main-content')?.innerHTML || html;
      document.querySelector('#main-content').innerHTML = newContent;

      // update tab title header
      pageTitle.textContent = newTitle;

      // update active link style
      navLinks.forEach(l => l.classList.remove('active'));
      link.classList.add('active');

      // update browser URL
      history.pushState({}, '', url);
    });
  });
</script>

✅ How It Works

• Each sidebar link now carries its page name via data-title.
• When you click a tab, your content loads dynamically into the right area and your purple header text updates to show that tab’s title instantly.
• The clicked link also stays highlighted.

▶️ Step 4: Restart and Test

node app.js

Now open your app, click:

• Students → purple header changes to Students
• Teachers → purple header changes to Teachers
• Attendance → purple header changes to Attendance, etc.

Everything still loads dynamically, keeping your sidebar fixed and your interface sleek 🔥.

Would you also like the browser tab title (top of the browser window) to update automatically to match these page titles as well?